CSS / Style / clip-path

CSS / Style / clip-path

形状を指定して対象を切り抜く。切り抜かれた対象は本当にその部分がなくなったかのように振る舞う

いくつか指定方法があるが 2019-12-06 現在ブラウザの対応がまちまちであるのでmemo

polygon

SVG の polygon 風記述で対象を切り抜くことができる。 対象の要素サイズに対しての相対指定が簡単にできるので切り抜くということが簡単である。

2019-12-06 現在 HTML 要素に対する指定は MS-Edge, Mac Safari, iOS Safari (多分その他色々で) では動作しない まったくなかったかのように何も切り抜かれない。

Firefox Chrome では当たり前のように動作する。

Tags

,
css/style/clip_path.txt · 最終更新: 2020-09-22 18:26 by ore