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响应三角宽度

1 个答案: