如何创建顶部带向上倾斜线的Footer？优化CSS/SVG实现方案

更新说明 #

我此前用CSS实现过该效果，但线条边缘存在锯齿，且三角形宽高比在不同宽度下无法保持一致。

需求详情 #

多数Footer的顶部为简单的水平直线，我需要让这条线呈向上倾斜状态。目前考虑过几种实现思路：

• 带透明通道的PNG图片
• 纯CSS实现
• SVG实现

我倾向于不使用PNG图片，已尝试过纯CSS方案，目前正在测试SVG方案。要求在1440px全屏宽度下，三角形的高度不超过200像素。

现有测试代码 #

CSS 代码 #

.main {
  background: #ccc;
}
.right-triangle {
  display: block;
}
.footer {
  background: #333;
  color: #fff;
}

HTML 代码 #

<div class="main">主区域底部需与下方元素无缝衔接。</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="right-triangle">
  <polygon points="50 25, 100 100, 0 100" />
</svg>
<div class="footer">
  Footer区域需与三角形无缝衔接，无间隙。
</div>

内容的提问来源于stack exchange，提问作者linnse