Html Firefox、Opera、，

我目前正在一个网页网站上工作，在剪辑路径中有一个图像滑块。示例如下： .

下面是一小段代码：

#幻灯片1{
高度：500px；
填充顶部：0px；
垫底：0px；
最小高度：0px！重要；
-webkit剪辑路径：多边形（0px 500px，100%450px，100%0px，0px 0px）；
}

---

首先，

-webkit clip path

仅适用于基于webkit的浏览器（Chrome/Safari/Opera）。如果您想在Firefox上使用剪辑路径，还需要使用

clip path

见：

---

另一个问题是Firefox还不支持剪辑路径的CSS形状，如

polygon（）

。您需要在SVG中定义一个多边形，并使用

clip path:url（#多边形元素的id）

引用该多边形。我尝试过使用SVG，但似乎无法使其工作。我在哪里添加SVG元素？在标题中？或者这无关紧要？我似乎无法将SVG应用于div#slide1。SVG应该内嵌在HTML中。这里有一个例子：我编辑了上面的代码（目前不起作用），它对我来说很好。如果您为幻灯片1提供背景色，使其实际可见，则可以看到正在播放的剪辑。