CSS 三角形ジェネレーター

CSSの三角形は、ツールチップの矢印、ドロップダウンのキャレット、リボン、装飾的な角などに使われます。昔ながらの方法は、幅と高さが0のボックスの枠線の1辺に色を付けるものです。枠線どうしが出会う場所は斜めに切られるため、色を付けた1辺が三角形になります。現代的な方法は、通常のボックスを切り抜く clip-path: polygon() です。このジェネレーターは8方向のどれについても両方を書き出し、ブラウザー上で並べてプレビューします。

使い方

1. 三角形が向く方向を選びます。
2. 幅と高さを設定するか、「正三角形」にチェックを入れて辺の長さをそろえます。
3. 色を選び、必要ならクラス名も設定します。
4. border方式のCSSまたはclip-path方式のCSSと、HTML要素をコピーします。

計算式

up: border-left = border-right = width ÷ 2 (transparent), border-bottom = height (color) · corner: one colored border = height, one transparent border = width · equilateral: height = width × √3 ÷ 2

左向きと右向きの三角形では役割が入れ替わり、上下の枠線が高さの半分、色付きの側面の枠線が幅になります。clip-path は、ボックスに対する百分率で頂点を並べます。

計算例

初期値の上向きの三角形（100 × 80 px、#2563eb）は、0 × 0のボックスに border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 80px solid #2563eb; を指定するか、100 × 80のボックスに clip-path: polygon(50% 0, 100% 100%, 0 100%) を指定します。「正三角形」にチェックすると、高さは 100 × √3 ÷ 2 = 86.6 px になります。