各種ブラウザ対応【IE】

hoge

IE対策とか、edge対策が地味にめんどくさい。

そんな時は、

polyfill.io が便利。

使い方
<script src="https://polyfill.io/v3/polyfill.min.js"></script>

ついでにclip-pathも対応したい、、、

救世主は、clip-path-polyfill！！

読込む
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
<script src="-path-/polyclip.js"></script>
こんな感じでdata-polyclipにポイントを設定
<img src="img.jpeg" data-polyclip="0, 10%, 50%, 0, 75%, 75%, 0, 80%">

ところが、clip-pathが効くのはimg要素だけということで、今回はdivに背景画像として設定していたので、うまく切り取れなかった（愕然）

なお、本家のdemoは、img要素なので、ちゃんとedgeブラウザでも切り取りされている。