なんにもない日の頭の中はこんなもんだったりする

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

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】吹き出しをつくる、三角の部分をちょっと曲げて素敵にする

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

ネ・ネット | HUMOR ユーモア
itgirlie
  • 2019.11.11New
  • itgirlie
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
11月13日
11月12日