CSS 响应三角形宽度

Question

真的很简单的问题，我想知道如何使三角形宽度（在 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;
}

Answer 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.

CSS 响应三角形宽度

CSS Responsive Triangle Width

html

css

css-shapes