webサイトのちょっとしたアクセントデザインとして、吹き出しを使うことがあると思います。
以前までは画像をつかって吹き出しを作っていましたが、簡単なものならばcssだけで吹き出しを作ることができるので、その方法をご紹介します。

まずは枠が無い、シンプルな吹き出しのサンプルが以下になります。

枠なしの吹き出し

See the Pen QbYQje by monochrome (@monochrome-design) on CodePen.

まずは吹き出しの中身となるdivに背景色をつけ、border-radiusで角丸にしました。
そして吹き出しの三角は:before(もしくは:after)疑似要素で作っています。CSSのみで三角形を作る方法としては、以下のサイトで分かりやすく解説されています。

そしてdiv要素のpositionをrelativeに、:before(:after)疑似要素のpositionをabsoluteにすることによって、自由に吹き出しの位置を変更できます。

枠付きの吹き出し

枠がついた吹き出しを作るときは、もう少し複雑になります。

See the Pen bdOKbP by monochrome (@monochrome-design) on CodePen.

吹き出しの中身となるdivに背景色をつけ、border-radiusで角丸にし、ボーダーをつけます。
そして三角部分は:before、:after両方を使って作ります。上記のサンプルでは、:beforeの上に、少しサイズを小さくした:afterを重ねて配置しています。

CSSで作った吹き出しは、画像と違い大きくしても荒くなることがないので、画面解像度の高いスマホサイトなんかでも綺麗に表示されます。簡単に作れ、色々と応用もできるので、試してみてはいかがでしょうか。