CSSだけで、LINE風の吹き出しの会話を作ってみました。
何かとよく使います。
やはりレスポンシブにコーディングするのは難しいですね。
シンプルに疑似要素の「:before」「:after」を使ってコーディングしています。
角丸はborder-radiusで調整。
参考になればと思います。
なんだかむずかしそうですねー
吹き出し部分にこだわらなかったら結構簡単にできますよー
シンプル版
See the Pen LINE風の吹き出しの会話をつくる、シンプル版 by 125naroom (@125naroom) on CodePen.
三角の部分をちょっと曲げて素敵にしてみる
See the Pen LINE風の吹き出しの会話をつくる、三角の部分をちょっと曲げて素敵にしてみる by 125naroom (@125naroom) on CodePen.
三角の部分をちょっと曲げて素敵にしてみる、動きもつけてみる
See the Pen LINE風の吹き出しの会話をつくる、三角の部分をちょっと曲げて素敵にしてみる、動きもつけてみる by 125naroom (@125naroom) on CodePen.
ふきだしをつくるのに便利なサイトさん
ベースは下記のサイトさんで作るのはいいかと思います。
仕組みがわかればオリジナルのコーディングを。
さいごに
パンおいしいですねー
おいしそうですねー
