响应式CSS仅三角形

Question

我这里有this pen，我试图将三角形变平。我使用this site中的代码来完成响应方面，但似乎三角形只能保留一个形状。不知道这是否有可能改变？

无论浏览器的宽度如何，目标都是三角形的宽度为其所在列的100％。

结束结果：

Answer 1

.pricing-table .col .triangle-down:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -800px;
margin-top: -578px;
border-left: 800px solid transparent;
border-right: 800px solid transparent;
border-top: 500px solid #d0d0d0;
}

对于更平坦的三角形，您只需要更改边框的值

编辑 - 要显示相关图片的结果。

margin-left: -2800px;
margin-top: -673px;
border-left: 2800px solid transparent;
border-right: 2800px solid transparent;