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


吹き出し、三角の部分をちょっと曲げてみると素敵になる、右向きです。
See the Pen CSSだけで、吹き出しをつくる、三角の部分をちょっと曲げてみると素敵になる、右向きです。 by 125naroom (@125naroom) on CodePen.
吹き出し、三角の部分をちょっと曲げてみると素敵になる、左向きです。
See the Pen CSSだけで、吹き出しをつくる、三角の部分をちょっと曲げてみると素敵になる、左向きです。 by 125naroom (@125naroom) on CodePen.
ふきだしをつくるのに便利なサイトさん
ベースは下記のサイトさんで作るのはいいかと思います。
仕組みがわかればオリジナルのコーディングを。
さいごに

