使用SVG创建透明对角线切割

Question

我目前正在使用下图中的剪辑路径。我愚蠢地没有查看浏览器支持，发现它在Edge或IE 11中不起作用。

我想知道如何或者如果可能的话我只能在IE 11和Edge中支持SVG来创建以下效果。

我目前一直在使用下面的代码，但很难理解如何将图像放在上面，如上图所示。

    <svg>
      <path d="M0,60 L50,0 L420,0 A56,56 0 20,1 470,60z" fill="red" />
      <a xlink:href="#">
        <text x="410" y="37" font-size="18" font-weight="500" fill="yellow">Test</text>
      </a>
    </svg>

真的很期待你的想法。

Answer 1

这是一个粗略的想法（抱歉粗略的代码，因为它匆忙）使用伪元素::before＆amp; ::after以及css3转换和转换属性，以实现您正在寻找的结果。如果它有帮助，你可以检查出来并解决它。我在FF和IE边缘以及11和10中检查了它，整体效果很好。

https://codepen.io/Nasir_T/pen/EvEMMG

希望这有助于提出您的想法或解决问题。