csssvgclip-pathcss-mask

Clip/mask (remove) top-right image corner with SVG


Is there a (Cross browser (no IE)) way to clip the top right corner of an dynamically sized image with this svg? In the worst case, I can use a fixed aspect ratio, but I prefer it to be as flexible as possible.

<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 43.45 43.45">
  <path fill="black" fill-rule="evenodd" d="M0 0v.05c1.15.11 2.24.6 3.06 1.42l38.93 39.06c.79.79 1.26 1.83 1.4 2.92h.06V0H0Z"/>
</svg>

Keep in mind it's not a straight cut, but the cut has 'rounded' corners: zoomed-in top-right corner

I just can't seem to get this to work.

This is the result I'm looking for (I can just use border-radius for the other corners): expected result

I've tried several things;


Solution

  • You can use it as a mask like below. Note the use of 80px 80px which will control the size of the SVG

    img {
      border-radius: 5px 0 5px 5px;
      -webkit-mask:
        linear-gradient(#000 0 0),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.45 43.45"><path fill="black" fill-rule="evenodd" d="M0 0v.05c1.15.11 2.24.6 3.06 1.42l38.93 39.06c.79.79 1.26 1.83 1.4 2.92h.06V0H0Z"/></svg>') 
        100% 0/80px 80px no-repeat;
      -webkit-mask-composite: xor;
              mask-composite: exclude;
    }
    <img src="https://picsum.photos/id/1/300/250" >