CSS3：フキダシを作る

まず表示サンプルはこちら。
http://jsdo.it/goto_jp/awLv

HTMLは下記のようにごくシンプルに。

<div class="fukidashi">ふきだしです。</div>

CSSは下記になります。

.fukidashi {
  background:#999;
  color:#fff;
  width:200px;
  margin:20px auto;
  border-radius:10px;
  padding:20px;
  position:relative;
}
.fukidashi:after {
  display:block;
  content:"";
  background:#999;
  width:10px;
  height:10px;
  position:absolute;
  bottom:-5px;
  left:20px;
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
}

「:after」セレクタを使ってdivの後にcontentで実体の箱をひとつ作り、transformで45度回転させて、absoluteで位置調整するというのがタネです。