CSSクリップパスジェネレーター
CSSクリップパスシェイプをインタラクティブに生成します。ポリゴン、円、楕円に対応し、頂点をドラッグしたり、矢印や星などのプリセットを選択したり、CSSクリップパス値をコピーできます。
Presets
Preview (drag points)
BG:
Vertices (3)
1
x
y
2
x
y
3
x
y
CSS Output
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
CSSクリップパスジェネレーターの使い方
- 1クリップパスのタイプを選択してください：ポリゴン、円、または楕円。
- 2プリセットシェイプを選択するか、コントロールポイントをドラッグしてカスタムシェイプを作成してください。
- 3CSSクリップパス値をコピーしてスタイルシートで使用してください。
Zenovayアナリティクス
関連ツール
CSSグラデーションジェネレータ
ビジュアルエディタで美しいCSSグラデーションを作成します。直線、放射状、円錐状のグラデーションに対応しています。CSSボックスシャドウジェネレーター
ビジュアルコントロールでCSSボックスシャドウを設計します。オフセット、ブラー、スプレッド、カラーを調整できます。CSSボーダーラディウスジェネレーター
カスタムボーダーラディウス値をビジュアルコントロールで作成します。コーナーをリンクまたはアンリンクして素早く調整できます。CSS Flexboxプレイグラウンド
CSS Flexboxレイアウトを視覚的に学習・生成できます。方向、配置、折り返し、ギャップをリアルタイムで調整できます。よくある質問
CSSのclip-pathとは何ですか？▾
clip-pathは要素を特定の形状にクリップします。形状の外側はすべて非表示になります。サポートされている値：polygon(x1 y1, x2 y2, ...)：パーセンテージとして頂点を持つカスタムポリゴン。circle(radius at cx cy)：円。ellipse(rx ry at cx cy)：楕円。inset(top right bottom left round radius)：インセット矩形。path("SVG path")：SVGパス。例：clip-path: polygon(50% 0%, 0% 100%, 100% 100%)は三角形を作成します。CSSのclip-pathはほとんどのユースケースで非推奨のSVG clipPathを置き換えました。ブラウザサポート：すべての最新ブラウザ。Safari < 14には-webkit-clip-pathのベンダープレフィックスを使用してください。
よく使われるclip-pathの形状パターンは何ですか？▾
上向き三角形：polygon(50% 0%, 0% 100%, 100% 100%)。下向き三角形：polygon(0% 0%, 100% 0%, 50% 100%)。六角形：polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)。右向き矢印：polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)。星：polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)。五角形：polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)。シェブロン：polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%)。
clip-pathとborder-radiusはどのように相互作用しますか？▾
clip-pathはborder-radiusを視覚的に上書きします — border-radiusはボックスモデルに存在し続けますが、clip-pathが角を隠すためborder-radiusが見えなくなります。丸みのある形状が必要な場合は：inset(0 round 10px)で角丸矩形を使用します。circle()とellipse()は本質的に滑らかです。丸みのあるポリゴンには、CSS基本形状polygon()と実験的なcorner-shapeプロパティを組み合わせてください。回避策：クリップされたコンテナ内の子要素にborder-radiusを適用します。clip-pathとborder-radiusは両方ともクリック/ホバーエリアに影響します。
CSSのclip-pathをアニメーション化できますか？▾
はい！clip-pathは同じ頂点数を持つ形状間のCSSトランジションとアニメーションをサポートしています。例：element { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition: clip-path 0.5s ease; } element:hover { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } なめらかな補間のために両方の形状は同じ頂点数でなければなりません。異なる頂点数の形状の場合は補間なしでスナップします。ヒント：異なる形状のポリゴン間で補間できるよう、両方の形状に余分な中点頂点を追加してください。
clip-pathとmaskの違いは何ですか？▾
clip-path：幾何学的形状（ポリゴン、円、SVGパス）を使用します。クリップされた領域は完全に非表示になります。シャープなエッジ。高パフォーマンス（GPUアクセラレーション）。mask：画像またはグラデーションを使用します。白=表示、黒=非表示、グレー=半透明。ソフトエッジ、グラデーション、複雑なマスクが可能。mask-image: linear-gradient(to right, transparent, black)はフェードアウト効果を作成します。clip-pathはハードな幾何学的形状（斜めのセクション、三角形、六角形）に使用します。maskはソフト効果、フェードアウト、画像ベースのマスクに使用します。どちらも同じSVGパス構文を受け入れます。