CSS clip-pathジェネレーター｜ビジュアル編集

polygon・circle・ellipse・insetのclip-pathをビジュアルUIで生成。ドラッグ編集＆10種プリセット付き。

シェイプ
コントロール
3 点
プリセット
プレビュー背景:
123
👆 キャンバスをクリックして追加⌘Z 元に戻すDel 右クリック / Delete
生成されたCSS
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

CSS clip-pathジェネレーター｜ビジュアル編集とは

CSS clip-pathを視覚的に生成できる無料ツール。polygon・circle・ellipse・insetの4タイプに対応。ドラッグ操作でポリゴン形状を編集し、三角形・六角形・星形などのプリセットも選択可能。生成されたCSSをすぐにコピーして利用できます。

使い方

  1. 1シェイプタイプ（Polygon・Circle・Ellipse・Inset）を選択してください。
  2. 2Polygonはキャンバス上の点をドラッグして形状を編集、またはプリセットから選択できます。
  3. 3生成されたclip-path CSSコードをコピーしてご利用ください。

メリット・特徴

  • polygon・circle・ellipse・insetの4タイプに対応
  • ドラッグ操作でポリゴンの頂点をリアルタイム編集
  • 三角形・ダイヤ・六角形・星形・矢印など10種のプリセット
  • ライブプレビューで形状を即座に確認
  • clip-path・-webkit-clip-pathの両方を出力
01

CSS clip-pathの基本と使い方

clip-pathプロパティは要素の表示領域を定義します。指定した形状の外側のピクセルはレンダリングされず、透明になります。背景・ボーダー・テキストを含む要素全体がクリップされます。

polygon()：多角形クリッピング

最も柔軟なシェイプ関数です。2D空間上の頂点座標をカンマ区切りで指定します。clip-path: polygon(50% 0%, 100% 100%, 0% 100%) は三角形を生成します。座標は「X% Y%」の形式で、要素の左上が原点です。このツールのキャンバスで点をドラッグすることでインタラクティブに編集できます。

circle()・ellipse()：円・楕円クリッピング

circle(radius at cx cy) で円を指定します。radiusには%やpx、またはclosest-side・farthest-sideなどのキーワードも使用可能です。ellipse(rx ry at cx cy) で楕円を指定します。アバター画像の丸型切り抜きやデザインアクセントに多用されます。

inset()：矩形クリッピングとborder-radius

inset(top right bottom left) で要素の各辺からの内側余白を指定します。inset(10% 20% 10% 20%) は上下10%・左右20%削ったサイズにクリップします。round キーワードでborder-radiusも同時指定可能。例: inset(10px round 20px) は10px内側に丸角矩形でクリップします。

02

clip-pathの実践パターン集

clip-pathはヒーローセクションの斜めカット・カードの非矩形デザイン・画像のシェイプ切り抜きなど多彩な場面で活用できます。

斜めカットレイアウト（Diagonal Cut）

clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%) をセクション要素に適用するとセクション下端が斜めにカットされます。次のセクションとの間に変化をつけるモダンなレイアウト手法です。

ホバーアニメーション

.element { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 0.4s ease; } .element:hover { clip-path: polygon(10% 10%, 90% 0, 100% 90%, 0 100%); } のようにhoverで頂点を動かすことでモーフィングエフェクトが実現できます。頂点数は変更しないことが重要です。

SVGパスを使った複雑なシェイプ

clip-path: url(#myClip) を使ってSVGの<clipPath>要素を参照することで、星形・矢印・カスタムロゴ形状など複雑なシェイプも実現できます。polygon()では表現できない曲線を含む形状にはSVGクリップパスが有効です。

よくある質問（FAQ）

clip-pathとは何ですか？
clip-pathはCSS プロパティで、要素の表示領域をクリッピング（切り抜き）します。指定した形状の外側は非表示になります。polygon（多角形）・circle（円）・ellipse（楕円）・inset（矩形）などの形状を指定でき、画像やdivをカスタム形状に切り抜くことが可能です。
clip-pathのブラウザ対応は？
clip-pathはChrome・Firefox・Safari・Edgeなどすべてのモダンブラウザで動作します（2024年時点で96%以上のユーザーをカバー）。Safariの古いバージョン向けには-webkit-clip-pathが必要な場合があります。このツールでは両方のプロパティを出力します。
polygon()のパーセンテージはどこが基準ですか？
polygon()の座標は要素のbounding box（幅・高さ）に対するパーセンテージで指定します。左上が(0% 0%)、右下が(100% 100%)です。pxなどの絶対値も使用可能ですが、レスポンシブには%が推奨です。
clip-pathはtransitionでアニメーションできますか？
できます。ただし頂点数が同じpolygon同士のみアニメーション可能です。例: transition: clip-path 0.5s ease; と設定し、hoverで別のpolygonを指定するとモーフィングアニメーションが実現できます。
clip-pathとshape-outsideの違いは？
clip-pathは要素の見た目を切り抜くプロパティ（はみ出た部分は非表示）。shape-outsideはfloat要素の周囲のテキスト折り返し形状を指定するプロパティで、見た目には影響しません。両方を組み合わせることでシェイプに沿ったテキスト回り込みを実現できます。

不具合や動作がおかしい点を見つけたら教えてください。

不具合報告はこちら →