このblogのついったを表示させてる部分はフキダシ風になってるけど
とても簡単なcssで出来てます。
([追記]
:before 擬似要素 / :after 擬似要素でつくる画像を使わないふきだしの作り方はこちら
こことか
こことか
以下その説明。
まず仕組みから
こうゆうイメージで作るとして
トンガリ部分は透過gifで作成しておく。
トンガリ部分をどの要素に持ってくるかが問題になると思うけど、今回は下の部分（青いエリア）の背景に配置した。
html的を色分けするとこんな風に。
例えば下の文章をふきだしにする場合
にんげんだもの - 320
「にんげんだもの」が赤エリアで「320」が青エリア。
htmlはこんな風にdlでマークアップした。
[html]
<dl>
<dd><p>にんげんだもの</p></dd>
<dt>320</dt>
</dl>
[/html]
cssで必要な記述はこんな感じ？
用意しておいた尖がり部分の画像を「320」の背景にして、positionを使ってマイナス方向にずらす。
[css]
*{
padding:0;
margin:0;
}
dd{
background:#d8d8d8;/*背景色*/
border:2px solid #808080;/*線の色*/
}
dt{
position:relative;
top:-2px;/*ddのborder分、今回は線幅2で作ったので-2px上へ*/
background:url(トンガリ画像.gif) no-repeat;
padding-top:1em;
}
[/css]