css - 剪辑路径可能有多个 mask 吗？

你好

我想知道是否可以在同一元素上使用多个 mask ，就像这样:

clip-path:polygon(8% 0%, 8% 7%, 14% 12%), polygon(96.4%, 92% 96.4%, 97% 92.3%), polygon(97% 15%, 99% 13%, 99% 0%);

这样，我将只能显示元素的某些相互分离的区域。

谢谢。

最佳答案

如果您将Clip-path与SVG定义的<clipPath>一起使用，则有可能

.clip-svg {
  clip-path: url(#myClip);
}

<img class="clip-svg" src="https://picsum.photos/id/1015/600/400">

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
      <polygon points="400,50 400,320, 140,300"/>
      <polygon points="450,10 500,200 600,100" />
      <polygon points="150,10 100,200 300,100" />
    </clipPath>
  </defs>
</svg>

确认可以在Chrome 60，Firefox 55，Edge 85中使用。不幸的是，在IE中不起作用。
完整的浏览器支持信息here。

关于css - 剪辑路径可能有多个 mask 吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37644696/

Polygon

css - 剪辑路径可能有多个 mask 吗？