1

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;
}
Improve this question
5
  • Possible duplicate of stackoverflow.com/questions/25360411/… Commented Jun 19, 2015 at 7: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%;. Commented Jun 19, 2015 at 7:33
  • 2
    @cezar the whole point of the construct is that the element has 0 width as it gets its looks from the border. Commented Jun 19, 2015 at 7:34
  • tried width 100% it just messes up the triangle Commented Jun 19, 2015 at 7:34
  • @NielsKeurentjes Thanks for clarifying! I didn't pay attention while reading. Commented Jun 19, 2015 at 7:42

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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!
width: 0 is set to the triangle and not the window/viewport. So it will work.
@Cheshire the 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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.