CSS clip-pathジェネレーター
要素を好きな形に切り抜くclip-pathのコードを、プレビュー上の頂点をドラッグするだけで作れます。多角形（polygon）のほか、円（circle）・楕円（ellipse）・長方形（inset）に対応し、三角形・六角形・星・矢印・吹き出しなどのプリセットから始めることもできます。座標はすべて%指定なので、要素のサイズが変わっても形が崩れません。角丸や影は CSS border-radiusジェネレーター や CSS box-shadowジェネレーター もご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
プレビュー
点線の枠が元の要素です。polygonでは頂点をドラッグするか、フォーカスして矢印キーで動かせます。
頂点
使い方
- 「図形」で polygon・circle・ellipse・inset のいずれかを選びます。
- polygonでは「プリセット」から形を選び、プレビュー上の頂点をドラッグして調整します（「頂点を追加」で増やせます）。
- circle・ellipse・insetは数値で大きさと位置を指定します。
- 「コピー」で clip-path のCSSをコピーします。
注意事項
- 座標は要素の左上を0%、右下を100%とした割合です。要素の幅・高さが変わると、形もそれに合わせて伸縮します。
- clip-pathで切り抜かれた部分は表示されないだけでなく、クリックなどのポインター操作も受け付けません。
- ボックスシャドウや枠線も切り抜かれます。影を残したい場合は、外側の要素にfilter: drop-shadow()を指定してください。
- 頂点は最大24個、最小3個です。頂点の数が異なる多角形同士はアニメーションで滑らかに変形しません。
用語解説
clip-path
要素の表示領域を図形で切り抜くCSSプロパティ。切り抜かれた外側は描画されず、ポインター操作も無効になる。
polygon()
頂点の座標を順に並べて多角形を指定するclip-pathの関数。各頂点は「X座標 Y座標」の形で、%やpxで指定する。
inset()
要素の上・右・下・左の各辺から内側へ切り詰めた長方形を指定する関数。round を付けると角が丸くなる。
よくある質問
clip-pathで切り抜いた要素に影や枠線を付けられますか？
clip-pathは影や枠線も切り抜いてしまいます。影を残したい場合は、要素を別の親要素で包み、その親にfilter: drop-shadow()を指定してください。
頂点の数を増やすにはどうしますか？
polygonを選んで「頂点を追加」を押すと、最後の頂点と先頭の頂点の中間に新しい頂点が加わります。頂点は最大24個まで、削除は3個になるまで可能です。
表示される形が要素の大きさによって変わるのはなぜですか？
このツールの座標はすべて%指定で、要素の幅・高さに対する割合です。そのため要素が縦長・横長になると、形も同じ比率で伸縮します。px固定にしたい場合は、コピー後に値を手で書き換えてください。
clip-pathはどのブラウザで使えますか？
主要なモダンブラウザで利用できます。古いSafariなどに配慮する場合は、「-webkit- 付きも出力する」を有効にすると-webkit-clip-pathも一緒に出力されます。
このページをシェア