CSS响应三角宽度 [英] CSS Responsive Triangle Width

问题描述

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

Simple question really, I want to know how I would make a triangles width (made in css with the below code) equal to the page width so when the browser resizes so does the triangle.

到目前为止，我的代码

.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;
}

推荐答案

.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! */
}

样本小提琴。

详细了解CSS3 vh / vw单元。

浏览器支持不是问题。

这篇关于CSS响应三角宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！