• サンプル
• サンプルのダウンロード

ソース

　仕組みはいたって簡単で、フキダシ部分の画像を用意し、これをhead部分の背景画像に指定します。この時、フキダシ画像文のpaddingを指定するのを忘れずに。そしてbody部分では、borderプロパティで左右と下側に枠線を設定します。上側の枠線はheadの背景画像に指定したフキダシが担ってくれるので指定しません。フキダシ画像や背景色を変更すれば、違った感じのフキダシを簡単に作ることができます。

<style>
.bottomBlow {
}
/*** 下フキダシ ***/
.bottomBlow .head {
  /* フキダシ画像 */
  background-image: url('fukidashi-u.gif');
  /* 繰り返し表示しない */
  background-repeat: no-repeat;
  /* 下にピッタリくっつける */
  background-position: 0% 100%;
  /* フキダシ画像分の大きさだけ余白をつける */
  padding-bottom: 8px;
}
.bottomBlow .body {
  /* とりあえず周辺に枠を付ける */
  border: solid 1px #ccc;
  /* フキダシ画像のある上に枠線は不要 */
  border-top: none;
  /* フキダシ中の余白 */
  padding: 4px;
}
</style>

<div class="bottomBlow">
  <div class="head">
    上にヘッダ、下にフキダシ
  </div>
  <div class="body">
    ここに本文ここに本文<br/>
    ここに本文ここに本文ここに本文ここに本文ここに本文ここに本文<br/>
  </div>
</div>

IEはPNG画像の透過属性に対応していません。GIF画像なら大丈夫です。