CSSで枠線付きの吹き出しを作る

単色の吹き出しは割りと簡単にできますが、マンガで見かけるような枠線付きの吹き出しに手間取ったのでメモしておきます。
https://codepen.io/webooker_info/pen/wpwMRb

[box type=”point”]:afterという疑似要素に三角形を作り、絶対配置しています。
ただし、正方形を回転させて作っているので正三角形しか使えません。[/box]

単色の吹き出しよりもポップさが出ますね。
枠線は色んな色に変更可能です。

See the Pen cssで枠線付の吹き出しを作る by Webooker (@webooker_info) on CodePen.

吹き出しの向きを変更する場合（追記：2019/04/25）

上記では下向きの吹き出しをご紹介していますが、もちろんどの向きでも作成できます。
算数が苦手で毎回「えーっと…？」となっていたので、それぞれの場合の角度を追記しておきます。

transform: rotate(135deg);

上記のコードのdegの数値を下記に変更してください。（ベンダープレフィックスは省略しています。）

• 上向き三角形は角度が315deg
• 左向き三角形は角度が225deg
• 右向き三角形は角度が45deg

Webと本の人 Webooker （ウェブッカー）

フリーランス Webデザイナー・グラフィックデザイナー

2009年からIT業界に。
WebデザイナーとしてITベンチャー企業、SaaS企業、Web制作会社に勤務。
2016年11⽉より独⽴し、フリーランスのWebデザイナー、グラフィックデザイナーとして活動
2024年1月から大阪のシステム会社に勤務し、フリーランスとの二足のわらじで現在に⾄る。 2子の親。フルリモートワーク。