CSS Responsive Triangle Width

Question

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.

My Code, So far

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

Read more on CSS3 vh/vw units.

Browser support is not an issue.