CSS clip-path ジェネレーター

clip-path は、画像、カード、ボタンなどの要素を図形の形に切り抜きます。図形の外側は、背景やホバーの範囲も含めてすべて隠れます。このジェネレーターは、三角形、多角形、星、十字、矢印、シェブロン、吹き出し、circle()、ellipse()、角丸付きinset()の16種類の図形について、比率や向きを調整したclip-pathの値を作成します。自作の多角形の検証もできます。プレビューでは各頂点に番号が付くので、順序が確認できます。

使い方

1. 図形を選びます。
2. 図形の値（傾き、内側の半径、腕の幅など）、頂点数、向きを調整します。
3. または「自作の多角形」を選び、1行に「x y」の頂点を1つずつ入力します。
4. CSSをコピーします。-webkit-付きの行と標準の行の両方が含まれます。

計算式

clip-path: polygon(x₁ y₁, x₂ y₂, …) · circle(r at cx cy) · ellipse(rx ry at cx cy) · inset(d round r)

多角形の座標は要素の左上の角から測り、xは幅に対する割合、yは高さに対する割合です。正多角形と星は等間隔の角度から計算し、ボックスいっぱいに引き伸ばします。

計算例

六角形は、上下が平らで60°間隔の6つの頂点をボックスに合わせて伸ばしたもので、polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) になります。正八角形は、各角を辺の 1 ÷ (2 + √2) = 29.29% の位置で切り落とします。内側の半径が50%の4角の星は、内側の頂点が 50 ± 17.68%、つまり32.32%と67.68%にあります。