使用 CSV 剪辑/遮罩（删除）图像右上角

Question

是否有一种（跨浏览器（无 IE））方法可以使用此 svg 剪切动态大小的图像的右上角？在最坏的情况下，我可以使用固定的宽高比，但我更喜欢它尽可能灵活。

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

请记住，这不是直切口，而是切口有“圆”角：

我似乎无法让它发挥作用。

这是我正在寻找的结果（我可以对其他角使用边框半径）：

我尝试了几件事；

• 带有内联 svg 的剪辑/蒙版
• 用多边形切割右上角（+尝试单独的边框半径）
• Webkit蒙版+蒙版复合
• 对象边界框
• 边框图像
• 还有更多..

Answer 1

您可以将其用作面膜，如下所示。请注意使用

80px 80px

来控制 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" >