如何使用 SVG 多边形创建三角形？

Question

我正在尝试使用 SVG 多边形创建一个底部三角形，如下图所示：

到目前为止，我已经这样做了：

<svg xmlns="http://www.w3.org/2000/svg" height="150px" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
  <svg width="100%" x="0">
      <polygon points="0 0,50 50,100 0,100 100,0 100" fill="#424963"></polygon>
  </svg>
  <svg height="200px" width="50%" x="50%">
      <polygon points="0 50,100 0,100 100,0 100" fill="#ED0F0C"></polygon>
  </svg>
</svg>

我无法正确定位红色三角形。有人可以指导我解决这个问题吗？

谢谢。

Answer 1

要参考规范，请阅读 here

您走在正确的道路上，调整多边形点的值将使您到达所需的位置。

像这样的东西就可以了：

<svg xmlns="http://www.w3.org/2000/svg" height="250px" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
  <rect width="100%" height="50%" fill="#2f3753"/>
  <svg width="100%" x="0">
      <polygon points="0 25,50 50,100 25,100 50,0 50" fill="#424963"></polygon>
  </svg>
  <svg height="200px" width="50%" x="50%">
      <polygon points="0, 50, 220, -50, 60, 0" fill="#ED0F0C"></polygon>

  </svg>
</svg>

您还会注意到我在矩形中添加了设置 SVG 背景。删除它或更改填充将 remove/change 背景。

如何使用 SVG 多边形创建三角形？

How to use SVG polygon to create triangle?

html

svg

polygon

clip-path