Clip-path プロパティ

最終更新：2026-09-13

clip-path Clip-path プロパティ

clip-path プロパティは、要素を円や多角形、楕円など指定した幾何形状にクリップし、形状の内側だけを表示して外側をすべて隠します。従来の overflow: hidden による矩形クリップとは異なり、clip-path は任意の形状の可視領域を作れるため、クリエイティブなレイアウトや視覚効果の強力なツールとなります。

カテゴリ
初期値	none
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

clip-path: none | <clip-source> | <basic-shape> | <geometry-box>;

⚙️ 値

値	タイプ	説明
`none`	キーワード	クリップなし
`<clip-source> \| <basic-shape> \| <geometry-box>`	値	クリップパス

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
clip-path	✓ v55	✓ v79	✓ v3.5	✓ v9.1	✓ v42
すべての主要ブラウザーでサポート

ヒント： polygon() は最も柔軟なクリップ関数で、任意の多角形を定義できます。Clippy などのオンライン生成ツールを使えば座標をすばやく作成できます。

注意： clip-path は要素のコンテンツと対話領域の両方をクリップします。切り取られた部分はマウスイベントに応答できません。

❓ よくある質問

QCSS における clip-path と mask プロパティの違いは何ですか？

Aclip-path はハードクリップです。クリップパス内の領域だけが保持され、外側は完全に不可視でイベントにも応答せず、エッジは硬い（sharp）です。mask はアルファベースのマスクで半透明のグラデーションに対応するため、柔らかくフェードするエッジが実現できます。幾何形状には clip-path を、画像やグラデーションで滑らかな遷移が欲しい場合は mask を使ってください。

Qclip-path プロパティは CSS の transition や keyframes でアニメーションできますか？

Aはい、2 つの条件があります。2 つの状態の関数が同じ型であり、かつ頂点数が同じであること — たとえば 4 頂点ずつの polygon() 同士、あるいは circle() からより大きな circle() への遷移です。これらは transition と animation に対応します。頂点数が異なる場合（三角形から五角形など）は補間できません。まず両方を同じ数に合わせる必要があります。

Q要素を円や多角形にクリップするにはどうすればよいですか？座標はどう解釈すればよいですか？

Acircle(50%) は円を作り、at を追加して中心を指定できます（circle(50% at 30% 40%) など）。polygon() はパーセンテージ座標で頂点を定義します — polygon(50% 0%, 100% 100%, 0% 100%) は三角形 — すべての座標は要素自身の幅と高さに対するものです。Clippy のようなビジュアルツールで座標をドラッグして生成し、その後微調整してください。

Qclip-path は要素のマウスクリックやヒットテスト領域に影響しますか？

Aはい。クリップで切り取られた領域は不可視であるだけでなく、マウスイベントにも応答しません。要素のヒットテスト領域はクリップされた形状に従います。これを利用してクリック可能な領域を正確に制御できますが、同時に切り取られた部分にはインタラクティブな要素を配置できないことも意味します。視覚だけを隠してクリック領域を維持したい場合は、代わりに mask や visibility を使ってください。