CSSでリボン風な見出しの作成をしてみました。CSSの記述が多くなりますが画像無しで作成が可能です。
CSSの指定内容とサンプル
body{
font-size:0.95em;
background:#f2f2f2;
}
#bubble{
background:#fffdfb;
border-radius:5px;
box-shadow:0 0 5px #777;
margin:0 auto;
width:400px;
position:relative;
z-index:9;
}
#bubble .rectang{
background:#684d3b;
box-shadow:0 0 2px #333;
height:3em;
width:430px;
text-align:center;
line-height:0;
position:relative;
left:-15px;
top:15px;
z-index:10;
}
#bubble h1{
color:#fffdfb;
font-size:1.5em;
line-height:2em;
position:relative;}
#bubble .triangle_l{
border-color:transparent #2c2018 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position:relative;
left:-30px;
z-index:-1;
}
#bubble .triangle_r{
border-color:transparent transparent transparent #2c2018;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position:relative;
left:400px;
top:-30px;
z-index:-1;
}
#bubble .info{
line-height:1.5;
margin:-30px 0 0 0;
padding:0px 15px 15px;
z-index:20;
}