图像滑块上的剪辑路径（蒙版）CSS样式（跨浏览器）

Question

我一直试图掩盖jQuery图像滑块。 滑块包含以下结构：

<div class="flexslider">
<ul class="slides">
    <li style="background-image: url('slides/1.jpg');"></li>
    <li style="background-image: url('slides/2.jpg');"></li>
    <li style="background-image: url('slides/3.jpg');"></li>
    <li style="background-image: url('slides/4.JPG');"></li>
    <li style="background-image: url('slides/5.jpg');"></li>
    <li style="background-image: url('slides/6.jpg');"></li>
    <li style="background-image: url('slides/7.jpg');"></li>
</ul>
</div>

在这个结构中，我想将clip-path属性应用于flexslider div。 在Chrome中，通过向属性添加-webkit-前缀可以正常工作，但Firefox和IE似乎不支持普通的剪辑路径属性。

我一直在网上寻找跨浏览器解决方案，但我无法找到。 我看到Firefox仅支持url值作为clip-path属性，但IE根本不支持它。

这是个主意：

红色部分是图像滑块。

有人知道跨浏览器解决方案吗？

谢谢！