clip-path

[hysryt]

No description provided.

[hysryt]

clip-path

要素をクリッピングする。
none以外を指定した場合、スタッキングコンテキストが作成される。

ブラウザの対応

参考：https://caniuse.com/css-clip-path

IE
未対応

Edge, Chrome, Safari
外部のSVGファイルをサポートしていない。SVGを使用したい場合はインラインSVGを使用する。

Firefox
完全対応

指定できる値

• <clip-source>
• <basic-shape> || <geometry-box>
• none

※ 「||」は「いずれかまたは両方」を意味する。

clip-source

SVG要素のパス。
url(#xxx)で指定する。

geometry-box

基準となるボックス

• margin-box
• border-box
• padding-box
• content-box
• fill-box
• stroke-box
• view-box

basic-shape

シェイプ。
CSS Shapes moduleで定義されたシェイプ関数を使用できる。

• inset
• circle
• ellipse
• polygon
• path