CSSで吹き出しを作るには
疑似要素 ::after の border を使い、画像を足さずに吹き出しの三角形を描く基本形を示す。
本体と三角形の色はカスタムプロパティで 1 箇所にまとめる。
実行確認済みは、ブラウザで実際に描画して見た目を確認したものである。
公開:
<div class="bubble">CSS だけで吹き出しは作れる。三角形は疑似要素の border で描く。</div>.bubble {
--bubble-bg: #0f766e;
position: relative; /* 三角形の位置基準 */
max-width: 260px;
margin: 0 0 14px;
padding: 12px 16px;
border-radius: 10px;
background: var(--bubble-bg);
color: #fff;
font-family: system-ui;
font-size: 14px;
line-height: 1.6;
}
.bubble::after {
content: ""; /* 空でも書かないと描画されない */
position: absolute;
top: 100%;
left: 28px;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom: 0;
border-top-color: var(--bubble-bg);
}幅と高さを 0 にした疑似要素に太い border を張り、下辺を消して左右を透明にすると、残った上辺が下向きの三角形として描かれる。
画像も clip-path も使わないので、色を変えれば三角形の色も一緒に変わる。
つまずき
疑似要素は content を書かないと生成されない。
三角形が出ないときは、まず content: "" があるかを確認する。
もう 1 つの定番は border-color の指定漏れで、border: 10px solid transparent を先に置いてから border-top-color で 1 辺だけ塗る順序を守らないと、後から書いた一括指定に上書きされて全辺が透明のままになる。
色を 2 箇所に書かない
吹き出しの本体は background、三角形は border-color と、同じ色を別々のプロパティで指定することになる。
片方だけ直して三角形の色が取り残される事故が起きやすいので、上の例のようにカスタムプロパティへ抜き出して両方から参照する。
テーマごとに色を差し替えるときも、変更点が --bubble-bg の 1 行で済む。
影は box-shadow ではなく drop-shadow で落とす
box-shadow は要素のボーダーボックスの形に影を落とすため、吹き出し本体には影が付いても三角形の周りには何も出ず、切り貼りしたような見た目になる。
輪郭全体に沿った影が欲しいときは、本体に filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) を指定する。
drop-shadow は描画結果のシルエットを基準にするため、疑似要素で足した三角形もまとめて影の対象になる。