CSSだけで、ふきだしをつくる

シンプルに疑似要素の「:before」「:after」でつくる。
色も大きさも自由に変更できるので便利。
角丸はborder-radiusで調整。
角丸が不要なときはborder-radiusを0にする。
もしくは削除。

ふきだし（下）

See the Pen
CSSだけで、ふきだしをつくる by 125naroom (@125naroom)
on CodePen.

ふきだし（上）、少し角丸

See the Pen
CSSだけで、ふきだし（上）をつくる by 125naroom (@125naroom)
on CodePen.

ふきだし（左）

See the Pen
CSSだけで、ふきだし（左）をつくる by 125naroom (@125naroom)
on CodePen.

ふきだし（右）

See the Pen
CSSだけで、ふきだし（右）をつくる by 125naroom (@125naroom)
on CodePen.

三角の部分をちょっと曲げて素敵にするなら、こちら

▽こちら
CSSだけで、吹き出しをつくる、三角の部分をちょっと曲げて素敵にする

ふきだしをつくるのに便利なサイトさん

ベースは下記のサイトさんで作るのはいいかと思います。
仕組みがわかればオリジナルのコーディングを。

▽CSS ARROW PLEASE
http://www.cssarrowplease.com/