ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう! みよう! みよう! Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;
![枠線付きの吹き出し](https://cdn-ak-scissors.b.st-hatena.com/image/square/40db34b22a997174746f2841b22f945e3e5e497e/height=288;version=1;width=512/https%3A%2F%2Fhail2u.net%2Fimg%2Fblog%2Fbordered-speech-bubble.png)