CSS三角形ジェネレーター｜8方向・内枠・くり抜き対応（clip-path）
CSSの三角形を8方向（▲▼◀▶◤◥◢◣）から選んで生成。幅・高さ・色に加え、三角形の内側に作る「内枠」や、内側を透明にくり抜いた三角形にも対応。clip-pathのコードをコピーするだけで使えます。
使い方
三角形の向きを8方向から選び、幅・高さ・色を指定すると、右側にプレビューとCSSコードが表示されます。コードをコピーして、そのまま使えます。生成されるCSSは clip-path ベースです。
📐 内枠について
一般的な「枠線」は要素の外側に太さが足されるため、枠をつけると図形が大きくなってしまいます。このツールの内枠は三角形の内側に作られるので、外形サイズが変わりません。▲を△（線だけの三角形）にしても、指定した幅・高さのままです。
内枠の三角形は「全辺から垂直に指定した太さぶん内側」に縮めた相似形です。内接円の半径が r から r - t になるので、縮小率は k = 1 - t / r。この r は三角形の形で変わるため、ツール側で自動計算しています。
🔧 CSS変数で太さを管理する
「太さをCSS変数で出力する」をONにすると、内枠の太さが --border-width にまとまり、1箇所を書き換えるだけで太さを変更できます。引き算する量は var(--border-width) * 係数 の形で出力されます。
この係数（W / r）はアスペクト比だけで決まり、絶対サイズに依存しません。そのため、生成したCSSの width: 240px を width: 50% のような可変値に書き換えても、比率さえ保てば係数はそのまま使えます。二等辺三角形（▲▼◀▶）の中央寄せも 50% と transform で出力しているので、幅の差し替えに追従します。
🔳 内側を透明にする（くり抜き）
「内側を透明にする」をONにすると、線だけの三角形（内側が背景の透ける三角形）になります。要素を2つ重ねて内側を白く塗る方式では、背景が画像やグラデーションのときに白い三角形が浮いてしまいますが、この方式なら本当に穴が開くので、どんな背景の上でも使えます。
仕組みは clip-path: polygon(evenodd, …) です。外周と内周を一筆書きでつなぎ、偶奇規則（evenodd）で内側を塗らないようにしています。要素は1つで済みます。
💡 clip-path と border の使い分け
| 観点 | clip-path（このツール） | border（従来手法） |
|---|---|---|
| 幅の指定 | % が使え、親幅に追従できる | px / vw のみ |
| 背景 | グラデーション・画像も使える | 単色のみ |
| アニメーション | 頂点を動かせる | 苦手 |
| くり抜き | evenodd で穴を開けられる | 不可（内側を塗るだけ） |
| 対応環境 | IE非対応（現状ほぼ問題なし） | ほぼ全て（HTMLメール等） |
面を塗るなら clip-path、フキダシの尻尾のように縁取りのある小さな三角形や、HTMLメールなど clip-path が使えない場面では border が有利です。