CSSクリップパスジェネレーター

使い方

1. ルールのクラス名を入力します（例：triangle）。続けて形を選びます。
2. 多角形の場合は、プレビューの点をドラッグするか、xとyの欄に値を入力します。点を追加と最後の点を削除で、点の数を変えられます。
3. inset、circle、ellipseの場合は、欄に数値を入力します。プレビューはすぐに描き直されます。
4. CSSのルールをスタイルシートにコピーし、切り抜く要素にクラスを付けます。

4つの形

CSS Shapesモジュール（英語）は、clip-pathプロパティが受け取る基本の形を定めています。polygonは、xとyの組からなる点を書いた順に線で結びます。insetは、箱の上、右、下、左からの4つの距離で切り取ります。circleとellipseは半径をもち、中心はatの後に書きます。

• polygon(50% 0%, 100% 100%, 0% 100%)は、xとyをそれぞれ%で書いた3つの点をもちます。
• inset(10% 20% 10% 20%)は、上と下から10%、左と右から20%を切り取ります。
• circle(60px at 50% 50%)は、半径60pxで、箱の中央を中心とする円です。

割合と基準の箱

点、余白、中心の割合は、箱に対する割合です。仕様では、基準となる箱の使用中の寸法に対して解決されます。CSS Maskingモジュール（英語）は、基準の箱が指定されていない場合、ボーダーボックスが使われると定めています。要素の形の外側の部分は描かれません。

このツールが書かないもの

• 多角形の塗りのルール（fill rule）、insetのround指定、clip-pathのurl()とpath()の形。
• circleやellipseの割合の半径。このツールが参照した形状の仕様は割合の解決方法を示していないため、半径はpxに限ります。

よくある質問