【CSS】吹き出しをつくる

【CSS】吹き出しをつくる

シンプルに疑似要素の「:before」「:after」でつくる。
色も大きさも自由に変更できるので便利。
角丸はborder-radiusで調整。
角丸が不要なときはborder-radiusを0にする。
もしくは削除。

きのこさん
ふきだしー
きのこさん
ふきだしー

吹き出し(下)

See the Pen
CSSだけで、ふきだしをつくる
by 125naroom (@125naroom)
on CodePen.

吹き出し(上)、少し角丸

See the Pen
CSSだけで、ふきだし(上)をつくる
by 125naroom (@125naroom)
on CodePen.

吹き出し(左)

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/

さいごに

きのこさん
ふきだしー
きのこさん
ふきだしー

関連記事

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

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

デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

mono°goen°
  • 2022.01.13New
  • mono°goen°
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
mono°goen°
  • 2022.01.13New
  • mono°goen°
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう