clip-pathと座標系
CSS Masking Module Level 1のclip-pathは、clip領域の外側を非表示にします。CSS Shapes Module Level 1の座標系はreference boxの左上が原点で、Xは右、Yは下へ進みます。
対応範囲
本ツールはpolygon()、circle()、ellipse()、inset()だけに対応します。url()、SVG clipPath、path()、shape()、rect()、xywh()、geometry-box指定、任意CSS入力には対応しません。
見た目とレイアウト
clip-pathは見える領域を変えますが、元の矩形layout boxや画像のpixel dataを書き換えません。polygonはポイント順が図形を決め、自己交差する順序もCSSとして生成します。
よくある質問
CSS clip-pathとは？
要素のどの領域を表示するかを図形で指定するCSSプロパティです。
どの形に対応していますか？
inset()、circle()、ellipse()、polygon()に対応します。
polygon()の座標は何を表しますか？
左上を0% 0%、右下を100% 100%とするX/Y座標です。本ツールのUIでは0〜100%で編集します。
ポイントの順番は重要ですか？
重要です。指定順に頂点を結ぶため、並べ替えると別の図形になります。
円の50%は単純に幅の半分ですか？
percentage radiusはCSS仕様に従って計算されます。本ツールはpixel半径へ独自変換しません。
要素自体のレイアウトも三角形になりますか？
なりません。見える領域をclipしますが、layout上のboxは矩形のままです。
path()やSVG clipPathに対応していますか？
対応していません。基本的なCSS shape生成に限定しています。
clip-pathをアニメーションできますか？
条件により可能ですが、本ツールは形状CSS生成専用です。animation作成には関連ツールを利用してください。
入力値は送信されますか？
送信・保存されません。生成とプレビューはブラウザ内で行います。