cup_of cup_of - 2 months ago 6
CSS Question

Possible to make a div come to a point at the top? Must be responsive

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.

enter image description here

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.

Thanks!

Answer

I've provided a working JSFiddle (change 15vw to your preferred height for the triangle at the top).


Explained

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