Css 多边形剪辑路径使用视差设置动画

好的，基本上我在一个skrollr视差网站上工作，设计师想要一个动画面具效果。如果您使用的是chrome或safari，您可以看到在上述JSFIDLE中工作。我的问题是，有没有人知道一种能更好地支持浏览器的方法？我需要它能够在skrollr中工作，能够响应窗口的高度，能够处理html元素而不仅仅是图像，并且至少能够在ie10、firefox、chrome和Safari中工作。这可能吗

---

如有任何建议，将不胜感激

应该可以使用内嵌SVG进行剪裁。我记得有人已经这样做了，但我现在找不到。

data-0-top="
 -webkit-clip-path: polygon(20% 100%, 74% 0%, 75% 0%, 21% 100%); 
 -moz-clip-path: polygon(20% 100%, 74% 0%, 75% 0%, 21% 100%); 
 clip-path: polygon(20% 100%, 74% 0%, 75% 0%, 21% 100%);"
data--200-top=" 
 -webkit-clip-path: polygon(-50% 100%, 0% 0%, 150% 0%, 100% 100%); 
 -moz-clip-path: polygon(-50% 100%, 0% 0%, 150% 0%, 100% 100%); 
 clip-path: polygon(-50% 100%, 0% 0%, 150% 0%, 100% 100%);