css - 是否可以有多个带有剪辑路径的蒙版？

Question

你好，

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

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%);

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

谢谢你。

Answer 1

如果您使用带有 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 中不起作用。

完整的浏览器支持信息在这里。

Answer 2

您还可以使用 CSS 制作一个进出元素边界的多边形。看：

https://24ways.org/2018/clip-paths-know-no-bounds/

https://codepen.io/danwilson/pen/zMgrgb

div {
  width: 80vmin;
  height: 80vmin;
  background: hsl(181, 90%, 52%);
  
  clip-path: polygon(30px 20px, 40px 200px, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

<div></div>

Answer 3

要将剪辑路径用于多个剪辑，您需要将其视为 etch-a-sketch。您必须完成该对象并按照该线到达下一个对象。然后在移动到下一个对象之前返回到上一个对象。

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

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

Answer 4

您可以使用多个掩码。但是您不能使用多个剪辑路径。您可以将多个蒙版与剪辑路径一起使用。您可以将 mask 属性与 clip-path 一起使用来制作多个蒙版。像这个例子。

#parent {
    display: flex;
    justify-content: center;
    align-items :center;
    height: 100vh;
    width: 100vh;
    background: linear-gradient(90deg, black 50%, yellow 50%);
 }
 .multiple_mask{
    height: 200px;
    width: 200px;
    background: red;
    clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 100%, 50% 50%);
    -webkit-mask-image: linear-gradient(45deg, black 50%, transparent 50%), linear-gradient(180deg, black, transparent);
    mask-image: linear-gradient(45deg, black 50%, transparent 70%);
 }

<div id="parent">
    <div class="multiple_mask"></div>
  </div>

希望你能理解