HTML/CSSで簡単な吹き出しの作り方

社内向けに書いたドキュメントが好評だったので公開しちゃいます。

基本編1

本体と三角形を分けて実装します

<div class="balloon">
  こんにちはこんにちは！
  <div class="triangle"></div>
</div>

.balloon {
  position: relative;
  width: 200px;
  height: 30px;
  background-color: #ccc;
  text-align: center;
}
.balloon .triangle {
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid #ccc;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

解説

三角形の部分は実はborderなんですが、よくわからないと思うので色を変えます。topを赤、leftを緑、rightを青にするとこんな感じです。

.balloon .triangle {
  border-top-color: #f00;
  border-left-color: #0f0;
  border-right-color: #00f;
}

三角形が３つありますね！

なぜborderを使うと三角形になるのかといえば、 四角形を囲うためにはborderは台形である必要がある からです。ためしに、.triangleのwidthとheightをちょっと大きめにします。

.balloon .triangle {
  width: 20px;
  height: 20px;
  background-color: #000;
}

たしかに一つ一つのborderは台形ですね！

そういうわけで、底辺にしたい部分のborderを太くして、その両脇を透明な状態で太くして、widthとheightを絞ると三角形になります。これは三角形を描画したい場合によく使うテクニックです。

あとはこの要素を、position:absoluteで一番下にくっつければOKです。

.balloon .triangle {
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
}

margin-left: -10pxしてるのは、left: 50%で50%の位置に来るのはborderの左端なので、border分左にずらす必要があるからです。

三角形を別の辺にくっつけたい場合でもだいたい同じです。簡単ですね。

基本編2

吹き出しのために空の要素を置くのはバカバカしい気がします。そこで擬似要素でどうにかしましょう。

<div class="balloon">
  こんにちはこんにちは！
</div>

.balloon {
  position: relative;
  width: 200px;
  height: 30px;
  background-color: #ccc;
  text-align: center;
}
.balloon:before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid #ccc;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

解説

HTMLがシンプルになりました。

.triangleの代わりに、:beforeに書いています。中身が空の:before擬似要素を置くためには以下のようにします。

.balloon:before {
  content: "";
}

あとは.triangleを置いていたときと変わりません。

応用編

「漫画の吹き出しみたいに灰色のフチで背景色は白にしてください！」とか言われたとしましょう。boderの三角形は塗りつぶししかできません。そこで三角形を2つ作ります。

<div class="balloon">
  こんにちはこんにちは！
</div>

.balloon {
  position: relative;
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  background-color: #fff;
  text-align: center;
}
.balloon:before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid #ccc;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.balloon:after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid #fff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

はい、簡単ですね。

解説

ここでのポイントは、:afterで作ってる三角形です。:beforeで#cccの三角形を作って、その上に:afterで#fffの三角形を作って重ねます。

ためしに、:afterの三角形を赤色にしてみましょう

.balloon:after {
  border-top-color: #f00;
  }

赤い三角形が上方向に1pxズレてるのがわかると思います。わからない人は顔をディスプレイに近づけましょう。