Clip Path ジェネレーター
要素を矢印・星・六角形・オリジナルのポリゴンにクリップ。キャンバス上でポイントをドラッグして clip-path コードをコピー。
ポイントをドラッグで変形 · キャンバスをダブルクリックで追加
Clip Path ジェネレーターの使い方
- プリセットシェイプを選ぶか、デフォルトの五角形のポイントをドラッグして始めます。
- キャンバス上の任意の場所をダブルクリックすると、最も近い辺に新しいポイントが挿入されます。
- ポイントを選択して「ポイントを削除」を押すと削除できます（最低3ポイント）。
- 円・楕円・インセットモードに切り替えると、角丸付きのパラメトリックな形を使えます。
- clip-path 宣言をコピー。パーセンテージにより、どんなサイズでも形がレスポンシブに保たれます。
この Clip Path ジェネレーターについて
CSS の clip-path プロパティは要素を基本形状（ポリゴン・円・楕円・インセット）にクリップし、その外側のすべてを隠します。斜めの区切り、六角形の画像グリッド、矢印、吹き出し、星評価など、画像や SVG を使わない非矩形レイアウトの標準的な方法です。
このエディターでは、キャンバス上でポリゴンの頂点をドラッグしたり、ダブルクリックでポイントを追加したり、15種類の手調整プリセットから始めたりして、視覚的にシェイプをデザインできます。すべての座標はパーセンテージで、シェイプは要素に応じてスケールします。出力には古い Safari 向けの -webkit-clip-path プレフィックスと、ユーティリティファーストプロジェクト向けの Tailwind 任意値クラスが含まれます。
Clip Path のよくある質問
ポリゴンのポイントを追加・削除するには？
キャンバス上の任意の場所をダブルクリックすると、その位置の最も近い辺に新しいポイントが挿入されます。削除するには、ポイントをクリックして選択し（赤くなります）、「ポイントを削除」を押します。ポリゴンは常に最低3つのポイントを保持します。
clip-path ポリゴンの座標系は？
各ポイントは要素の左上から測定された x/y のペアです。このジェネレーターはパーセンテージを使用し、0% 0% が左上、100% 100% が右下です。パーセント座標は要素に応じて自動スケールし、シェイプをレスポンシブに保ちます。
clip-path をアニメーションできますか？
はい。開始と終了の形状が同じタイプでポイント数が同じであれば（ポリゴンの場合）、clip-path は CSS でアニメーション可能です。このツールで2つの状態をデザインし、ポイント数を一致させ、transition: clip-path .3s で遷移させてください。
clip-path は子要素やオーバーフローに影響しますか？
clip-path は子要素、ボーダー、さらには box-shadow を含む要素全体をクリップします。形状の外側はすべて隠され、クリックもできなくなります。クリップした形状にシャドウが必要な場合は、代わりに親要素に drop-shadow() フィルターを適用してください。
clip-path と SVG clipPath の違いは？
CSS clip-path の基本形状（ポリゴン・円・楕円・インセット）は、1行のコードでほとんどのレイアウトニーズをカバーし、アニメーション可能です。SVG clipPath は曲線を含む複雑なパスをサポートします。幾何学的なデザインには CSS シェイプ（このツール）を、ベジェ曲線が必要な場合は SVG を使ってください。