Skew bottom background css - html

Question

I want to reproduce my mockup : http://imgur.com/ZsR88fe
But I don't know how to skew my background image, only at the bottom. For nom I try the transform skew but all the image is skewed and The top of the page look ugly :
http://imgur.com/TkUgppW
What can I do to fix it ?
Thanks in advance

Answer 1

Skewed or Slanted div, hero or landing pages could be made quickly using the clip-path CSS property with polygon function.
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); //This makes a complete square
The skew could be made reducing the percentage in each angle.
Here's how to make skew on any components.
.skew {
height: 50vh;
width: 100%;
clip-path: polygon(0px 0px, 100% 0px, 100% 80%, 0px 100%);
background:#0a3;
}
<div class="skew">
<h1> Hey there </h1>
</div>

Answer 2

To make a bottom skew for your image with CSS, you're gonna need a few wrappers:
Content div for all the text
Image wrapper that will create the skew and hide the skewed area
Image div that contains nothing but the hero picture
Then you need to apply the opposite skew to the image div to make it not distorted. After that you have to mess around with positioning to ensure that as much of the image is visible and the top skew is hidden. Maybe there's a more clever solution, I just use hardcoded pixel values.
Here's the demo, and here's the important bits:
HTML
<div class="hero">
<div class="bg-img-wrapper">
<div class="bg-img"></div>
</div>
<div class="hero-content">
<h1>Cool company slogan</h1>
<p>Catchy subslogan</p>
</div>
</div>
SCSS (you can just replace the variables and it will be valid CSS, but they help with readability here)
$skewDeg: 5deg;
$offset: 70px;
.hero {
height: 100vh; // Make the hero area take 100% height
overflow: hidden; // Child's skew will cause overflow, so we hide it here
position: relative; // Children will be positioned absolutely relative to this
}
.bg-img-wrapper {
transform: skewY($skewDeg);
position: absolute;
top: -$offset; // Move the top skew offscreen
bottom: $offset; // Move the skewed area up a bit so more of it is visible
right: 0;
left: 0;
overflow: hidden; // Hide the areas that we skewed away
}
.bg-img {
background: url('https://unsplash.it/1280/720/?random') center no-repeat;
background-size: cover;
position: absolute;
top: $offset; // Move the image down by the amount of the parent that's being rendered offscreen
bottom: -$offset;
right: 0;
left: 0;
transform: skewY(-$skewDeg); // Skew the opposite amount of the parent to make the image straight again
}
.hero-content {
position: relative; // Relative positioning here makes the hero content visible
}