34

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.

Cain Nuke
  • 2,843
  • 5
  • 42
  • 65

4 Answers4

39

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.

Zac
  • 984
  • 14
  • 25
  • I just tested your code snippet in both Edge and IE11, and it worked. Am I missing something about support? Also, MDN says, "Any number of the following elements, in any order..." which would seem to indicate your solution is appropriate usage https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath#Usage_notes – MuffinTheMan Sep 30 '20 at 14:02
  • Looks like it does work in recent versions of Edge, just didn't 3 years ago! I have tested in IE11 and it just shows the whole image. AFAIK IE11 doesn't support using the clip-path on HTML elements in this way. – Zac Oct 06 '20 at 21:37
  • @Zac, can you check what wrong with my code? Its only work with one polygon item, but does not with multile. – Sevi Oct 08 '22 at 12:35
  • @Zac ` /* It doesn't work, but if delete one of them so its work with only one polygon */ ` – Sevi Oct 08 '22 at 12:36
  • @Zac, https://stackoverflow.com/questions/73996512/svg-clipppath-multiple-polygon-elements-does-not-work – Sevi Oct 08 '22 at 12:37
5

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>
agrm
  • 3,735
  • 4
  • 26
  • 36
jedierikb
  • 12,752
  • 22
  • 95
  • 166
2

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

Abdullah
  • 21
  • 3
2

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"/>
aaronwcasteel
  • 23
  • 3