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>

的剪辑路径，则可以执行此操作

＆＃13;

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

＆＃13;

<img class="clip-svg" src="http://lorempixel.com/output/animals-q-c-640-480-7.jpg">

<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>

＆＃13;

确认在Windows上使用Chrome 60，Firefox 55。遗憾的是，它不适用于IE / Edge。

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

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

#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>

希望你理解

Answer 4

要为多个剪辑使用剪辑路径，您需要将其视为蚀刻草图。您必须完成该对象并按照该行到达下一个对象。然后在移动到下一个之前返回上一个对象。

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"/>

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

4 个答案: