CSS Clip-Path生成器 - 図形をビジュアル編集 オンライン
ビジュアルドラッグ&ドロップエディターでCSS clip-path図形を作成。ポリゴン、円、楕円、インセットパスをライブプレビューで。
よくある質問
CSS clip-pathとは何ですか？
CSS clip-pathは、要素のどの部分を表示するかを決定するクリッピング領域を作成するプロパティです。クリッピングシェイプの内側はすべて表示され、外側はすべて非表示になります。polygon()で任意の多角形、circle()で円形領域、ellipse()で楕円形領域、inset()でオプションの角丸を持つ矩形領域をサポートしています。非矩形レイアウト、装飾的なセクション区切り、画像マスク、クリエイティブなUI要素の作成に広く使用されています。
このclip-pathジェネレーターの使い方は？
タブからシェイプタイプ（Polygon、Circle、Ellipse、Inset）を選択します。ポリゴンの場合、キャンバス上のコントロールポイントをドラッグしてシェイプを調整し、エッジをクリックして新しいポイントを追加するか、プリセットシェイプを開始点として選択できます。円/楕円の場合、スライダーまたは数値入力で半径と中心位置を調整します。インセットの場合、上下左右のインセット値を設定し、オプションでborder-radiusを追加します。リアルタイムで更新されるライブプレビューを確認し、ワンクリックで生成されたCSSコードをコピーしてください。
データは安全ですか？サーバーに送信されますか？
はい、データは完全に安全です。このツールはクライアントサイドのJavaScriptを使用してブラウザ内で完全に動作します。画像データ、シェイプ設定、その他の情報がサーバーに送信されることはありません。すべての計算はデバイス上でローカルに行われ、完全なプライバシーが保証されます。
パーセントとピクセル単位の違いは何ですか？
パーセント（%）の値は要素の寸法に相対的で、clip-pathをレスポンシブにします。要素のサイズが変わると自動的にスケーリングされます。ピクセル（px）の値は絶対的で固定されており、要素の寸法に関係なくclip-pathは同じサイズを維持します。レスポンシブデザインにはパーセントを使用し（推奨）、正確な固定サイズのクリッピング領域が必要な場合はピクセルを使用してください。
clip-pathシェイプ間でアニメーションできますか？
はい、CSS clip-pathシェイプはCSSトランジションとアニメーションを使用してアニメーションできます。重要な要件は、開始シェイプと終了シェイプが同じシェイプ関数（例：両方ともpolygon()）を使用し、同じ数のポイントを持つことです。例えば、三角形から別の三角形にスムーズにトランジションしたり、正方形をダイヤモンドに変形させたりできます。要素に'transition: clip-path 0.3s ease'を適用するだけです。
どのプリセットシェイプが利用できますか？
三角形、ダイヤモンド、五角形、六角形、八角形、星、右矢印、十字、台形、ベベルなどのプリセットポリゴンシェイプのライブラリを提供しています。各プリセットはワンクリックで適用でき、その後コントロールポイントをドラッグして目的のシェイプにカスタマイズできます。
どのブラウザがCSS clip-pathをサポートしていますか？
基本シェイプ（polygon()、circle()、ellipse()、inset()）を使用するCSS clip-pathは2020年1月からサポートされており、すべてのモダンブラウザで動作します：Chrome 90以上、Firefox 88以上、Safari 14以上、Edge 90以上。古いWebKitブラウザでは-webkit-clip-pathベンダープレフィックスが必要な場合があります。この機能はベースラインと見なされ、本番環境で安全に使用できます。
コード例
// CSS Clip-Path Generator - JavaScript Implementation
// Generate polygon clip-path from an array of [x, y] coordinate pairs
function generatePolygonClipPath(points) {
const coords = points
.map(([x, y]) => `${x}% ${y}%`)
.join(', ');
return `clip-path: polygon(${coords});`;
}
// Generate circle clip-path
function generateCircleClipPath(radius, centerX = 50, centerY = 50) {
return `clip-path: circle(${radius}% at ${centerX}% ${centerY}%);`;
}
// Generate ellipse clip-path
function generateEllipseClipPath(radiusX, radiusY, centerX = 50, centerY = 50) {
return `clip-path: ellipse(${radiusX}% ${radiusY}% at ${centerX}% ${centerY}%);`;
}
// Generate inset clip-path with optional border-radius
function generateInsetClipPath(top, right, bottom, left, borderRadius = 0) {
const inset = `${top}% ${right}% ${bottom}% ${left}%`;
if (borderRadius > 0) {
return `clip-path: inset(${inset} round ${borderRadius}%);`;
}
return `clip-path: inset(${inset});`;
}
// Common preset shapes
const PRESETS = {
triangle: [[50, 0], [100, 100], [0, 100]],
diamond: [[50, 0], [100, 50], [50, 100], [0, 50]],
hexagon: [[25, 0], [75, 0], [100, 50], [75, 100], [25, 100], [0, 50]],
star: [[50, 0], [61, 35], [98, 35], [68, 57], [79, 91], [50, 70], [21, 91], [32, 57], [2, 35], [39, 35]],
};
// Usage
console.log(generatePolygonClipPath(PRESETS.triangle));
// clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
console.log(generateCircleClipPath(40, 50, 50));
// clip-path: circle(40% at 50% 50%);
console.log(generateInsetClipPath(5, 10, 5, 10, 15));
// clip-path: inset(5% 10% 5% 10% round 15%);