CSS clip-path ジェネレーター
🔒ブラウザ内処理
polygon・circle・ellipse・inset のクリッピングパスをビジュアルで作成してCSSをコピー。頂点をドラッグして自由に編集。ブラウザ完結。
プリセット
頂点 (3 / 20)
辺をクリックして頂点を追加 · ハンドルをダブルクリックで削除
1x: 50%y: 0%
2x: 100%y: 100%
3x: 0%y: 100%
プレビュー
CSS
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
よくある質問
データはサーバーに送信されますか？
されません。clip-path の計算はすべてブラウザ内で完結します。
polygon の頂点はどうやって増やしますか？
辺（頂点と頂点を結ぶ線）をクリックすると、クリックした位置に新しい頂点が挿入されます。最大20頂点まで追加できます。
polygon の頂点を削除するには？
ハンドル（白い円）をダブルクリックすると削除できます。最小3頂点が必要なため、3頂点以下では削除できません。
circle と ellipse の違いは何ですか？
circle は半径1つで真円を作ります。ellipse は X半径と Y半径を個別に指定できるため、横長・縦長の楕円を作れます。
inset の round とは何ですか？
矩形クリッピング（inset）の角を丸める設定です。0%で直角、値を上げると角が丸くなります。border-radius に似た効果です。