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