Is it possible to have multiple masks with clip-path? - css

Question

Hi,
I wonder whether it's possible to use more than one mask on the same element, just like this:
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%);
With this I would be able to show only certain areas of the element that are separated from each other.
Thank you.

Answer 1

This is possible if you use clip-path with an SVG-defined <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>
Confirmed working in Chrome 60, Firefox 55, Edge 85. Unfortunately doesn't work in IE.
Full browser support information here.

Answer 2

You can also use CSS to make one polygon which goes in and out of element bounds . See:
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

You can use multiple mask. But you can't use multiple clip-path. You can use multiple masks with clip-path.
you can use mask property with clip-path to make multiple masks.
like this example.
#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>
Hope you understand

Answer 4

To use clip path for multiple clips you need to think of it like an etch-a-sketch. You have to complete the object and follow that line to the next object. Then come back to the previous object before moving to the next one.
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"/>