have div slanted coming to point with logo - html

Question

I am trying to make something like this...
where the blue is the div, and the black is the logo. how is something like this achieved? I was messing around with the transform but this also does one side.

Answer 1

This is a great opportunity to use CSS shapes!
If you think of the blue shape as "a blue rectangle that is immediately followed by a blue downward-pointing triangle, with no gap between them", then we just need to figure out how make that triangle and put it in the right place.
Let's start with your current HTML & CSS (I'm basing this on the screenshot, and assuming the logo element is outside the blue <div>):
.pointy {
background-color: #0086FD;
height: 285px;
}
.logo {
background-color: #000;
height: 200px;
margin: 0 auto;
transform: translateY(-30%);
width: 200px;
}
<div class="pointy"></div>
<div class="logo"></div>
No need to modify your HTML here. We're going to use the :after pseudo element to add the triangle shape after the div.
I used the handy CSS Triangle Generator to get a triangle started using border properties.
A few other details:
adding position: relative to the div, so that...
we can position the triangle at the bottom with position: absolute and top: 100%
we're applying width: 100vw to the div, because...
since the triangle is created using borders, and borders can't be a percentage width, we can set the two relevant border widths to 50vw, and they'll be exactly half the width of the 100vw parent
Let's make the triangle red for the moment, so you can see it clearly.
.pointy {
background-color: #0086FD;
height: 285px;
position: relative;
width: 100vw;
}
.pointy:after {
border-color: #f00 transparent transparent transparent;
border-style: solid;
border-width: 50px 50vw 0 50vw;
content: '';
display: block;
height: 0;
position: absolute;
top: 100%;
}
.logo {
background-color: #000;
height: 200px;
margin: 0 auto;
transform: translateY(-30%);
width: 200px;
}
<div class="pointy"></div>
<div class="logo"></div>
Final solution
Now that we have created and positioned our triangle, let's make it the same color as the div. (I've also tweaked the vertical positioning of .logo to achieve the desired effect.)
Voila: pointy blue div, no extra HTML needed.
.pointy {
background-color: #0086FD;
height: 285px;
position: relative;
width: 100vw;
}
.pointy:after {
border-color: #0086FD transparent transparent transparent;
border-style: solid;
border-width: 50px 50vw 0 50vw;
content: '';
display: block;
height: 0;
position: absolute;
top: 100%;
}
.logo {
background-color: #000;
height: 200px;
margin: 0 auto;
transform: translateY(-20%);
width: 200px;
}
<div class="pointy"></div>
<div class="logo"></div>