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

【问题标题】：How to use SVG polygon to create triangle?如何使用 SVG 多边形创建三角形？
【发布时间】：2020-07-31 12:39:14
【问题描述】：

我正在尝试使用 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>

我无法正确定位那个红色三角形。有人可以指导我吗？

谢谢。

【问题讨论】：

标签： html svg polygon clip-path

【解决方案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 背景。删除它或更改填充将删除/更改背景。

【讨论】：

查看我的 codepen here 以查看它的外观。
嘿，就是这样。我做了一些修改来得到我想要的。谢谢。