CSS好きの方がいれば、教えてください。
CSSでリボン型のタイトルを制作したいと考えております。
タイトル背景に色があり右側が逆三角形に切れているスタイルです。
タイトルが1行であれば、borderの高さを合わせればできますが、
2行以上になっても対応できるようにしたいんです。
三角形の高さを相対で指定できれば解決しますが、私のスキルでは解決策が思いつきません。
CSSだけでこのようなスタイルを実現するのは難しいでしょうか？
CSS以外にjQueryを使用すれば実現できますか？
アドバイス頂けると助かります。

#hoge h1 {
width:672px;
height:100%;
padding:12px 0 12px 25px;
margin:0 0 15px -24px;
background:#0068b7;
font-size:115%;
line-height:140%;
color:#fff;
font-weight:bold;
position:relative;
box-shadow:-5px 1px 3px #CCC;
}
#hoge h1:after {
content:"";
/* borderとborder-rightの高さを相対で指定できれば(´；ω；｀) */
border:25px solid transparent;
border-right:20px solid #fff; /* 背景色を指定 */
position:absolute;
right:0;
top:0;
}