【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.

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

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

さいごに

なるほどー
おもしろいですねー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

4

/

20

2024

Googleさんの
おすすめ

4

/

20

2024

デザインの記事

メリット
  • 2024.04.19New
  • メリット
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
5年経った無印良品窓の家
【jQuery】 ローディング、実装サンプル集