侧面有透明半圆的三角形 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>

侧面有透明半圆的三角形 svg

Triangle svg with a transparent semi-circle on its side

html

graphics

svg

vector

svg-path