Web制作

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

2016.05.11

2017.05.16

紙風船を膨らませる女の子

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

CSSで三角形を描画する

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

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

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

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

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

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。