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

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.