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

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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)