Html 剪辑路径不为'；无法在firefox[%values]中工作

我试图在mozilla中运行svg剪辑路径，但它不起作用

.mask-1 {
    -webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
    clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
}

它在铬合金中工作得非常好。有人能帮我解决mozilla和其他浏览器的问题吗？

您可以在Firefox中使用内嵌SVG（如下面的代码所示），您的分数是百分比/100。由于属性

clipPathUnits

的缘故，掩码将有响应

<svg width="0" height="0">
  <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 0.58 0, 0.39 0.818, 0 0.818" />
    </clipPath>
  </defs>
</svg>

由于svg是动态添加到页面中的，因此我在这方面做了大量的工作。通过js应用带有延迟（或页面加载）的clip path css属性解决了我在FF中的问题

---

据我所知，IE没有任何支持。

我也为此付出了很多努力。我所涉及的内容与上面的答案类似，但我发现一个解决方案是使用样式标记添加CSS内联。这很难看，但至少有效

.剪掉这个{
剪辑路径：多边形（40.4%0,100%0,100%100,01100%）；
剪辑路径：url（“滑动剪辑路径”）；
}

除了@atomictom的答案，我发现如果您将div的类更改为id，那么您就不必内联CSS

body{
背景：浅绿色；
}
#剪掉这个{
背景：红色；
高度：200px；
宽度：200px；
剪辑路径：多边形（40.4%0,100%0,100%100,01100%）；
剪辑路径：url（“滑动剪辑路径”）；
}

尝试使用

-moz-clip-path

我尝试过，但效果不好Firefox不支持

clip-path

。（我记得）。可能会对你有所帮助。实际上FF目前只支持svg中带有

url（[svgFile.svg]#元素）

@kaido的CSS剪辑路径，它支持%值吗？这是唯一对我有效的东西！我从来没有想到我需要将规则从css中去掉并放入html主体中。感谢tipThis为我工作！但是我想给它添加一个css转换？

.mask-1 {
   -webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
   clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
   -webkit-clip-path: url("#clip-shape"); 
   clip-path: url("#clip-shape");
}