Hello I have been assigned a tricky task. I need to make a square div come to a point at the top. Basically it will look like a square div with a wide triangle at the top. See my screen shot below. The dark blue at the top is just another div stacked on top of the white div.
Ive tried doing a psuedo before element to create a triangle from here and positioning it at the top of the square. It works but is not responsive. I need to make the triangle a width of 100% so it is responsive. When shrinking the screen it gets funky so I decided to not go this route because I dont want to create tons of media queries.
I am unsure how to accomplish this other than the psuedo triangle element I tried, which does not work for me because it is not responsive. Maybe an svg element, or a skewed div?
Any one have any suggestions? I dont necessarily need someone to type out code to answer this for me. I just need someone to point me in the right direction and I can write the code myself.
I've provided a working JSFiddle (change
15vw to your preferred height for the triangle at the top).
I have created a
width: 0; height: 0; div at the top and set its border on the left and on the right to
50vw (so it takes up the entire width of the window). Next, I set the bottom and upper borders to be of height
15vw (my chosen height for the triangle - as stated, customizable).
I set all of the borders to be transparent aside from the bottom border, which we want to be seen. Then I set
margin-top: -15vw; to push it to the top of the window (by using
transform we would transform it post-reflow and would therefore leave whitespace at the bottom).