如何使用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>

您还将注意到我已经在rect中添加了设置SVG背景的功能。删除此选项或更改填充将删除/更改背景。