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

Question

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

谢谢

第一个SVG：

第二个SVG：

Answer 1

您应该了解SVG路径命令。

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;