LINE風の吹き出しの会話をCSSで作ってみる

CSSだけで、LINE風の吹き出しの会話を作ってみました。
何かとよく使います。
やはりレスポンシブにコーディングするのは難しいですね。
シンプルに疑似要素の「:before」「:after」を使ってコーディングしています。
角丸はborder-radiusで調整。
参考になればと思います。

なんだかむずかしそうですねー

吹き出し部分にこだわらなかったら結構簡単にできますよー

シンプル版

See the Pen
CSSだけで、LINE風の吹き出しをつくる、シンプル版 by 125naroom (@125naroom)
on CodePen.

三角の部分をちょっと曲げて素敵にしてみる

See the Pen
LINE風の吹き出しの会話をつくる、三角の部分をちょっと曲げて素敵にしてみる by 125naroom (@125naroom)
on CodePen.

三角の部分をちょっと曲げて素敵にしてみる、動きもつけてみる

See the Pen
LINE風の吹き出しの会話をつくる、三角の部分をちょっと曲げて素敵にしてみる、動きもつけてみる by 125naroom (@125naroom)
on CodePen.

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

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

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

さいごに

パンおいしいですねー

おいしそうですねー

関連記事

【CSS】吹き出しをつくる

【CSS】吹き出しをつくる、三角の部分をちょっと曲げて素敵にする