01
置き換えを先に確認
星形や矢印を選ぶと、現在の頂点を何個置き換えるか表示します。適用後も一度戻せるので、作りかけの形を失いません。
HTML / CSSツール
clip-pathジェネレーター頂点を動かして確認
多角形の頂点を直接動かすか基本図形を調整し、切り抜き結果とCSSを確認します。
clip-pathジェネレーター
図形プレビュー
CSSの結果
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);座標とCSSはブラウザー内だけで生成します。
CSSをコピーできます。
画像を斜めに切ったりバッジを六角形にしたりするとき、polygonの座標を文字だけで決めるのは手間がかかります。clip-pathジェネレーターなら頂点を動かしながら輪郭を確認できます。
このclip-pathジェネレーターは円、楕円、insetにも専用の数値設定を用意しています。図形と出力コードの対応を見てからスタイルシートに移せます。
clip-pathジェネレーターを使う理由
座標と実際の切り抜きを同じ画面で見比べられます。
頂点を動かして境界を確認
多角形の点をドラッグすると切り抜きの縁が動きます。数値欄からも調整できるので、clip-path頂点 編集を細かく進められます。
単位を変えても輪郭は同じ
百分率と320×320pxの基準枠で換算したピクセル値を切り替えられます。clip-path多角形 作成で、実際の要素に合う単位を選べます。
プリセットから安全に仕上げる手順
02
点と単位を調整
辺の小さな印から中点を追加できます。頂点を選べばX・Yの数値も編集可能。百分率は要素に追従し、pxは320pxの枠を基準にします。
03
新しい結果だけ書き出す
自動生成は操作が止まってから反映します。オフなら生成ボタンかCtrl/Cmd+Enterを使用し、古いCSSはコピーできません。
切り抜き形状を作る機能
四つの基本図形
polygon、circle、ellipse、insetをそれぞれのパラメーターで扱います。円を多角形の折れ線で代用しません。
頂点の追加と削除
辺に中点を足し、ドラッグや数値で動かせます。削除は事前に確認し、頂点は最低3個を残します。
戻せる形状プリセット
三角形、ひし形、六角形、星形、矢印を選べます。変更前の形状をプレビューし、適用後に戻せます。
CSSをそのまま取得
CSSクリップパスジェネレーターとして標準のclip-path宣言を生成し、コピーまたはCSSファイルで保存します。
座標と表示に関する制限
- pxは固定サイズ用
- ピクセル出力は320×320pxの基準枠に合わせます。別サイズの要素でも同比率にはならないため、伸縮するデザインには百分率を使います。
- 既存コードは読み込まない
- path()、shape()、SVGのurl()、混合単位を扱うソースエディターではありません。コード欄は生成結果の表示専用です。
- レイアウト幅は変わらない
- CSS図形 切り抜きは表示範囲を変えますが、要素が占める場所は変えません。box-shadowも要素と一緒に切られる場合があります。
- 画像やアニメーションは出力しない
- PNG・SVGファイル、画像アップロード、hover用アニメーションCSSは対象外です。多角形の補間には同じ頂点数が必要です。
clip-pathジェネレーターのよくある質問
-webkit-clip-pathは必要ですか？
対象ブラウザーの対応状況を確認してください。このツールは標準のclip-path宣言のみを出力し、必要ならプロジェクト側で接頭辞を追加します。
頂点の数は増やせますか？
はい。辺の印を押すか追加ボタンで中点を入れられます。削除は確認画面を経て行い、3頂点未満にはできません。
clip-pathはアニメーションできますか？
CSSでは形状の補間ができますが、ここでは単一の静的形状だけを生成します。多角形のアニメーションには前後で同じ頂点数を用意してください。
clip-pathはどのブラウザで使えますか？
対応状況はブラウザーと形状構文で異なります。生成するのはpolygon、circle、ellipse、insetという基本形状です。利用環境の対応表で確認してください。
切り抜いた形状にbox-shadowが表示されないのはなぜですか？
clip-pathで要素自身の描画が切られるため、box-shadowも見えなくなる場合があります。影を残すなら外側の要素に影を付けます。
図形や座標の問題を見つけましたか？
clip-pathジェネレーターを試す
形状を選び、頂点を動かして、プレビューとCSSの一致を確認してください。
次に独自の切り抜きが必要になったら、clip-pathジェネレーターで座標を整えられます。
ブラウザー内で処理します。