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

Question

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;

• Clip/mask with inline svg
• Cut the top right corner with polygon (+ try a separate border radius)
• Webkit mask + mask composite
• objectBoundingBox
• Border-image
• Many more..

Answer 1

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" >