CSS响应三角形宽度

【问题标题】：CSS Responsive Triangle WidthCSS响应三角形宽度
【发布时间】：2020-05-08 04:55:52
【问题描述】：

真的很简单的问题，我想知道如何使三角形宽度（使用以下代码在 css 中制作）等于页面宽度，因此当浏览器调整大小时，三角形也会如此。

我的代码，到目前为止

.triangle {
    color: crimson;
    width: 0;
    height: 0;
    margin-top: 30%;
    border-top: 100px solid crimson;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}

【问题讨论】：

stackoverflow.com/questions/25360411/…的可能重复
您将宽度设置为 0。假设带有 triangle 类的标签是 body 的子标签，我会尝试使用 width: 100%;。
@cezar 构造的重点是元素的宽度为 0，因为它从边框获取外观。
试过宽度 100% 只是弄乱了三角形
@NielsKeurentjes 感谢您的澄清！看书的时候没注意。

标签： html css css-shapes

【解决方案1】：

.triangle {
    color: crimson;
    width: 0;
    height: 0;
    margin-top: 30%;
    border-top: 100px solid crimson;
    border-left: 50vw solid transparent; /* check border size here! */
    border-right: 50vw solid transparent; /* and here! */
}

Sample fiddle.