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

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

确认在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>