html - 侧面有一个透明半圆的三角形 svg

Question

我正在寻找一种方法来制作那些 svg 路径，但现在没有运气。我在互联网上搜索了很长时间......我知道 css 可以做到这一点，但如果有人知道如何用 SVG 构建它们，那就太好了。

谢谢

第一个 SVG：

第二个SVG：

Answer 1

您应该了解 SVG 路径命令。

https://www.w3.org/TR/SVG2/paths.html#PathData

例如，您可以通过一些路径命令列表来定义这样的形状。

<svg viewBox="0 0 200 200" width="200" height="200">
  <path d="M0 0l60 60a1 1 0 0 0 80 80l60 60h-200z"/>
</svg>
<svg viewBox="0 0 200 200" width="200" height="200">
  <path d="M0 0l60 60a1 1 0 0 1 80 80l60 60v-200z"/>
</svg>