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

Possible duplicate of http://stackoverflow.com/questions/25360411/responsive-css-triangle-with-percents-width — sdvnksv, Jun 19 '15 at 07:31
You set the width to 0. Assuming the tag with the class `triangle` is a child of body, I'd try with `width: 100%;`. — cezar, Jun 19 '15 at 07:33
@cezar the whole point of the construct is that the element has 0 width as it gets its looks from the border. — Niels Keurentjes, Jun 19 '15 at 07:34
@NielsKeurentjes Thanks for clarifying! I didn't pay attention while reading. — cezar, Jun 19 '15 at 07:42

score 3 · Accepted Answer · answered Jun 19 '15 at 07:33

3

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

answered Jun 19 '15 at 07:33

Niels Keurentjes

41,402
9
98
136

I would like to point something that I'm not catching. If `width` property is equal to `0`, how does it gets the full width of the window/parent? Just something I'm wondering since I saw this post! – Zander Jun 19 '15 at 08:46
`width: 0` is set to the triangle and not the window/viewport. So it will work. – m4n0 Jun 19 '15 at 08:48
@Cheshire the [box model](https://developer.mozilla.org/en-US/docs/Web/CSS/box_model) defaults to that `width` specifies the size of the content part of the element, excluding borders and padding. Another solution to the problem in this case would have been to specifiy `width:100%` and `box-sizing:border-box` actually, same effect. – Niels Keurentjes Jun 19 '15 at 09:06

CSS Responsive Triangle Width

1 Answers1