枠線だけ色のついたフキダシをCSSで作る

今回作るもの

枠線の色が#000000、フキダシ内の色が#FFFFFFになっているフキダシをCSSのbefore要素、after要素を使って作ります。
「吹き出しの背景色と枠線の色が違う」みたいなデザインを形にする時に使ってみると良いかもしれません。

完成デモ

作成手順

① フキダシにしたい要素を作成

<div class="balloon">
    <!-- フキダシ文言等を挿入 -->
</div>

② 白の三角形、黒の三角形を作る

.balloon:before,
.balloon:after {
    position: absolute;
    left: 50%;
    top: 100%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    border-width: 14px;
    margin: 0 0 0 -14px;
}
.balloon:before {
    border-top-color: #000000;
}
.balloon:after {
    border-top-color: #FFFFFF;
}

※margin-leftで位置をずらしているのは、中央揃えにするためです。作りたい見た目に応じて、この辺りは調整してください。

③ 白の三角形の位置をずらして、フキダシ線を表現する

.balloon:before {
    border-top-color: #000000;
    margin-left: -14px;
}
.balloon:after {
    border-top-color: #FFFFFF;
    margin: -1px 0 0 -14px;
}

手順②の時点で重なっていた2つの三角形の内、白の三角形をmargin-topのネガティブマージンでずらします。
今回はフキダシのborder-widthが1pxなので、-1pxだけずらします。

備考

CSSのtranslateプロパティを使って作ることも出来ますが、今回はIE8をサポートするケースを考慮し、before要素とafter要素のみで作成してみました。

ツッコミ、ダメ出し歓迎です。

おわり