CSS クリップパスジェネレーター

キャンバス上で直接形を作れます。多角形の頂点をドラッグし、丸みのある形も試して、CSS または SVG をエクスポートしましょう。

ライブプレビュー

頂点をドラッグするか矢印キーで動かします。Shift を押すと 10% ずつ移動します。Delete キーで削除できます。

clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);

すべての処理はブラウザー内で完結します。

形式の参考資料

MDN — clip-path

ツールページの更新日： 2026-10-24