Open hysryt opened 2 years ago
要素をクリッピングする。 none以外を指定した場合、スタッキングコンテキストが作成される。
参考:https://caniuse.com/css-clip-path
IE 未対応
Edge, Chrome, Safari 外部のSVGファイルをサポートしていない。SVGを使用したい場合はインラインSVGを使用する。
Firefox 完全対応
※ 「||」は「いずれかまたは両方」を意味する。
SVG要素のパス。 url(#xxx)で指定する。
基準となるボックス
シェイプ。 CSS Shapes moduleで定義されたシェイプ関数を使用できる。
clip-path
要素をクリッピングする。 none以外を指定した場合、スタッキングコンテキストが作成される。
ブラウザの対応
参考:https://caniuse.com/css-clip-path
IE 未対応
Edge, Chrome, Safari 外部のSVGファイルをサポートしていない。SVGを使用したい場合はインラインSVGを使用する。
Firefox 完全対応
指定できる値
※ 「||」は「いずれかまたは両方」を意味する。
clip-source
SVG要素のパス。 url(#xxx)で指定する。
geometry-box
基準となるボックス
basic-shape
シェイプ。 CSS Shapes moduleで定義されたシェイプ関数を使用できる。