125naroom / デザインするところ(会社)です。

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

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

今回は、吹き出しの三角の部分をちょっと曲げて素敵にしてみました。
シンプルに三角だけなら簡単なのですが、「LINE風にしたい」というご要望がありまして。
シンプルに疑似要素の「:before」「:after」を使って重ねることで可能でした。
一度作ってしまえば、色も大きさも自由に変更できるのでとても便利ですね。
角丸はborder-radiusで調整しています。

きのこさん
パンみたいですねー
きのこさん
たしかにパンみたいですね。丁寧に作ることでおいしくなりますねー

吹き出し、三角の部分をちょっと曲げてみると素敵になる、右向きです。

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

吹き出し、三角の部分をちょっと曲げてみると素敵になる、左向きです。

See the Pen
CSSだけで、吹き出しをつくる、三角の部分をちょっと曲げてみると素敵になる、左向き
by 125naroom (@125naroom)
on CodePen.

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

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

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

さいごに

きのこさん
なるほどー
きのこさん
おもしろいですねー

関連記事

【CSS】吹き出しをつくる

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

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
ちょっと思い出しただけ
【Google Chrome】ショートカットキーまとめ(Windows or Mac)