ZeroTool Workbench
CSS Clip-Path ジェネレーター
CSSのclip-path形状をビジュアルで生成。ハンドルをドラッグしてポリゴン・円・楕円・インセットを作成。リアルタイムプレビュー付き無料オンラインツール。
使い方
- タブで形状を選択します：ポリゴン、円、楕円、またはインセット。
- ポリゴン: プレビューの白いハンドルをドラッグして頂点を移動するか、頂点リストにX/Y値を直接入力します。プリセットボタン（六角形・星・矢印・ひし形・三角形）を出発点として使えます。
- 円: スライダーで半径と中心位置を調整します。
- 楕円: 水平半径・垂直半径・中心位置を個別に設定します。
- インセット: 各辺のオフセットとオプションの角丸を設定します。
- カラーと画像背景を切り替えて、異なる背景でクリッピングを確認します。
- コピーボタンで生成したCSSをクリップボードにコピーします。
生成されるCSSについて
出力は.elementクラスにclip-pathを設定します。このプロパティはimg・div・疑似要素など任意の要素に直接適用できます。すべての座標は要素の幅・高さに対するパーセンテージで表されるため、要素をリサイズしても形状が正しくスケールします。
主な活用シーン
CSS clip-pathは非矩形の画像トリミング・斜めのセクション区切り・装飾的なヒーロー形状・形状表示アニメーション・アイコンマスク・スクロールトリガーのモーフィング効果などに活用されます。ポリゴンモードは特に柔軟で、最大12頂点の凸形・凹形多角形をSVGやCanvasなしに表現できます。
FAQ
CSS clip-pathとは何ですか？
CSS clip-pathプロパティは要素を指定した形状にクリッピングし、境界の外側を非表示にします。サポートされる形状にはpolygon()・circle()・ellipse()・inset()があります。ハードウェアアクセラレーションが効き、画像・div・疑似要素など任意のHTML要素に適用できます。
ポリゴンの頂点はどうやってドラッグしますか？
ポリゴンタブに切り替え、プレビュー上の白い円形ハンドルをドラッグして頂点を移動します。右の頂点リストに直接パーセント値を入力することもできます。「+ 頂点を追加」ボタンで追加、「×」で削除できます。
polygon()のパーセンテージは何を意味しますか？
各頂点はX%（左端からの割合）とY%（上端からの割合）で表されます。50% 0%は上中央、100% 100%は右下角です。0〜100%の範囲外の値も有効で、要素の境界を超えてクリッピングできます。
inset()関数とは何ですか？
inset()は各辺からのオフセット（上・右・下・左）で矩形のクリッピング領域を定義します。オプションのroundキーワードでクリップ矩形の角を丸くできます。ソフトエッジのトリミング効果や視覚的な余白を持つクリッピングに便利です。
clip-pathをCSSトランジションでアニメーションできますか？
はい、開始と終了の値が同じ形状関数で頂点数が同じであれば可能です。たとえば頂点数が同じ2つのpolygon()値の間、または2つのcircle()値の間でtransition: clip-path 0.3s easeを使って滑らかにアニメーションできます。