CSSのみで作成する吹き出し

吹き出しのあしらいは長方形と三角形を組み合わせて作成します。 しかし、CSSのみで作成するとなると、三角形を描画するのが意外と手間がかかります。

CSSで三角形を描画する

今回は簡易的な吹き出しを作成するために、高さ、幅が0pxの正方形の1辺のみボーダーを設定することで三角形を描画します。他の辺にはボーダー色を透明に設定します。

See the Pen VaRPNe by tetsuro (@tetsuro) on CodePen.

吹き出しをのあしらいを作成する

三角形を描画できればあとは、長方形と組み合わせることで吹き出しのあしらいが完成です。

See the Pen Balloon by tetsuro (@tetsuro) on CodePen.