clip-pathのpolygon関数とは？

polygon()はCSS clip-pathで最も柔軟な関数で、複数の頂点座標（% or px）を指定して任意の多角形で要素を切り抜けます。例えばpolygon(50% 0%, 0% 100%, 100% 100%)で三角形になります。このツールではドラッグで頂点を移動して直感的に形状を作れます。

clip-pathのブラウザ対応状況は？

clip-pathプロパティはChrome 55以降、Firefox 54以降、Safari 13.1以降、Edge 79以降で対応しています。古いSafari向けには-webkit-clip-pathプレフィックスが必要で、このツールではプレフィックス付きのコードも出力します。

画像の切り抜きにも使えますか？

はい、clip-pathはimg要素やdiv要素など、あらゆるHTML要素に適用できます。画像を星形やハート形に切り抜いたり、セクション間に斜めのカットを入れるなど、多彩なレイアウト表現が可能です。このツールで画像をアップロードして効果を確認できます。

矢印やシェブロンのプリセットはありますか？

はい、矢印（右・左・上・下）、シェブロン（右・左）、双方向矢印の7種類の矢印系プリセットを用意しています。基本図形（三角形・星形・ハートなど11種）と合わせて全18種類のプリセットからワンクリックで選択できます。

形状を反転・回転するには？

polygonモードでは「左右反転」「上下反転」「90°回転」の変換ボタンをワンクリックで使えます。プリセットで選んだ形状を反転・回転して好みの向きに調整したり、自分で編集した形状のミラーコピーを作成できます。

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

Name: CSSクリップパスジェネレーター
Availability: InStock
Author: Zeronova（ゼロノバ）

CSS clip-pathプロパティをドラッグ操作で視覚的に作成できます。polygon・circle・ellipse・insetの4関数に対応。プリセットから選択することも可能です。

プリセット形状

基本図形

矢印・シェブロン

3 ポイント / エッジ付近クリックで追加 / 右クリック or ダブルクリックで削除

変換

プレビュー画像

未選択時はグラデーション背景で表示されます

CSS コード

-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

HTML テンプレート

<div style="
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  width: 300px;
  height: 300px;
"></div>

CSS clip-path とは

CSSのclip-pathプロパティは、要素の表示領域を特定の形状にクリッピング（切り抜き）するためのプロパティです。円形、楕円形、多角形、矩形など、さまざまな形状で要素を切り抜くことができ、画像のマスキングやUIデザインの装飾に広く活用されています。

従来のoverflow: hiddenやborder-radiusでは表現が難しい、斜めのカット、星形、ハート形などの複雑な形状もclip-pathで実現できます。このツールではドラッグ操作で直感的にクリッピング形状を調整し、 CSSコードをワンクリックでコピーできます。

clip-path の関数

関数	説明	例
polygon()	複数の頂点座標で多角形を定義	polygon(50% 0%, 0% 100%, 100% 100%)
circle()	中心座標と半径で円を定義	circle(50% at 50% 50%)
ellipse()	中心座標とX/Y半径で楕円を定義	ellipse(50% 40% at 50% 50%)
inset()	上右下左の内側オフセットで矩形を定義	inset(10% 10% 10% 10% round 10%)

このツールの使い方

clip-pathの種類（polygon / circle / ellipse / inset）を選択
polygonモードではプリセット形状（矢印・シェブロン含む18種類）を選択するか、ポイントをドラッグして自由に形状を編集
左右反転・上下反転・90°回転ボタンで、形状をワンクリックで変換
circle / ellipseモードではスライダーで半径と中心位置を調整
insetモードではスライダーで上下左右のオフセットと角丸を調整
画像をアップロードしてクリッピング効果をプレビュー
生成されたCSSコードをワンクリックでコピーして利用

clip-path のブラウザ対応状況

モダンブラウザ：Chrome、Firefox、Safari、Edgeの最新版でclip-pathプロパティは完全にサポートされています。 polygon()、circle()、ellipse()、inset()のすべての関数が利用可能です。

ベンダープレフィックス：古いバージョンのSafari（13以前）では-webkit-clip-pathが必要な場合があります。このツールではベンダープレフィックス付きのコードも出力します。

活用例：ヒーローセクションの斜めカット、プロフィール画像の円形切り抜き、ホバーエフェクトでの形状変化（transition対応）、スクロールに連動したクリッピングアニメーションなど、クリエイティブなWebデザインに幅広く活用できます。

このツールが役に立ったらシェアしてください

ご意見・ご要望をお聞かせください

機能追加を求む！不具合を見つけた！

よくある質問

Q. clip-pathのpolygon関数とは？: polygon()はCSS clip-pathで最も柔軟な関数で、複数の頂点座標（% or px）を指定して任意の多角形で要素を切り抜けます。例えばpolygon(50% 0%, 0% 100%, 100% 100%)で三角形になります。このツールではドラッグで頂点を移動して直感的に形状を作れます。
Q. clip-pathのブラウザ対応状況は？: clip-pathプロパティはChrome 55以降、Firefox 54以降、Safari 13.1以降、Edge 79以降で対応しています。古いSafari向けには-webkit-clip-pathプレフィックスが必要で、このツールではプレフィックス付きのコードも出力します。
Q. 画像の切り抜きにも使えますか？: はい、clip-pathはimg要素やdiv要素など、あらゆるHTML要素に適用できます。画像を星形やハート形に切り抜いたり、セクション間に斜めのカットを入れるなど、多彩なレイアウト表現が可能です。このツールで画像をアップロードして効果を確認できます。
Q. 矢印やシェブロンのプリセットはありますか？: はい、矢印（右・左・上・下）、シェブロン（右・左）、双方向矢印の7種類の矢印系プリセットを用意しています。基本図形（三角形・星形・ハートなど11種）と合わせて全18種類のプリセットからワンクリックで選択できます。
Q. 形状を反転・回転するには？: polygonモードでは「左右反転」「上下反転」「90°回転」の変換ボタンをワンクリックで使えます。プリセットで選んだ形状を反転・回転して好みの向きに調整したり、自分で編集した形状のミラーコピーを作成できます。

開発者

Zeronova（ゼロノバ）

Product Manager / AI-Native Builder

19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。

@zeronova_lab プロフィール →