何か説明を付け加えたい時のこの表現 → ?
こんな感じで説明が表示されます。
マウスのカーソルを合わせると付加情報が表示されます。 上のサンプルではCSSのみで吹き出しを作っています。
表現をもっと吹き出しっぽくするために、SVGを使って吹き出しを描いてみます。
多角形
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="50" class="fl pd10">
<polygon points="10 0, 200 0, 200 50, 10 50, 10 10, 0 10" stroke="#998877" fill="#FFEEDD"></polygon>
<foreignobject x="20" y="5" width="170" height="40">
<div class="demo_txt">SVGの多角形を使った吹き出し</div>
</foreignobject>
</svg>ベジェ曲線
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="50" class="fl clear pd10">
<path d="M10,10 Q10,0 20,0 L190,0 Q200,0 200,10 L200,40 Q200,50 190,50 L20 50 Q10,50 10,40 L10,20 L0,15 L10,10" stroke="#998877" fill="#FFEEDD"></path>
<foreignobject x="20" y="5" width="170" height="40">
<div class="demo_txt">SVGのベジェ曲線を使った吹き出し</div>
</foreignobject>
</svg>こやつらを？の中に隠してあげると…
SVGの多角形の吹き出しの場合 → ?
SVGのベジェ曲線の吹き出しの場合 → ?
