clip-path
clip-path は CSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 55 | 79 | 3.5 | 9.1 | 55 | 9.3 | |
| DOM API | ||||||
| SVGClipPathElement インターフェイスは、 clipPath 要素のプロパティへのアクセス、およびそれらを操作するためのメソッドを提供します。 | 1 | 12 | 1.5 | 3 | 18 | 1 |
| clipPathUnits は SVGClipPathElement インターフェイスの読み取り専用プロパティで、この要素のコンテンツに使用する座標系を定義する clipPath 要素の clipPathUnits 属性を反映します。 | 1 | 12 | 1.5 | 3 | 18 | 1 |
| transform は SVGClipPathElement インターフェイスの読み取り専用プロパティで、 clipPath 要素の transform 属性（この要素に適用される座標変換のリスト）を反映します。 | 1 | 12 | 1.5 | 3 | 18 | 1 |
| CSS プロパティ | ||||||
basic shape `<基本形状>` | 23 | 79 | 54 | 7 | 25 | 7 |
html elements HTML要素について | 23 | 79 | 3.5 | 7 | 25 | 7 |
path `パス()` | 88 | 88 | 71 | 13.1 | 88 | 13 |
svg elements SVG要素について | 23 | 12 | 52 | 7 | 25 | 7 |
| その他 | ||||||
| は SVG の要素で、 clip-path プロパティで使用されるクリッピングパスを定義します。 | 1 | 12 | 1.5 | 3 | 18 | 3 |
svg.elements.clipPath.clipPathUnits | 1 | 12 | 1.5 | 3 | 18 | 3 |
| systemLanguage 属性は、サポートされている言語タグのリストを表します。 このリストは、ユーザー設定で定義された言語と照合されます。 | 1 | 12 | 12 | 3 | 18 | 3 |
| clip-path 表示属性は、クリップパスを、それが関連付けられている要素と定義、または関連付けます。 | 23 | 12 | 52 | 7 | 25 | 7 |
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (23)
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (79)
実装メモ
- `url()` で定義されたクリップ パスのみをサポートします。
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (7)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (25)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (7)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (10)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (10)
基本構文
CSS
.hexagon {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.circle-crop {
clip-path: circle(50% at center);
}
.reveal {
clip-path: inset(0 100% 0 0);
transition: clip-path 0.5s ease;
}
.reveal:hover {
clip-path: inset(0 0 0 0);
}ライブデモ
実務での使いどころ
-
図形切り抜き
画像やカードを六角形・円形・星形などの形状に切り抜いて表示する。
-
クリッピングアニメーション
clip-path をアニメーションさせて、要素の表示領域を動的に変化させるワイプ効果。
注意点
- clip-path で切り抜かれた領域外のコンテンツはクリックやホバーイベントも受け取れない。
- polygon の頂点数が異なるとアニメーション間の補間ができない。
アクセシビリティ
- clip-path で視覚的に隠されたコンテンツもスクリーンリーダーには読み上げられる。意図しない場合は aria-hidden を併用する。