How to Slant/Skew only the bottom of the div

Question

I have been trying to add a Skew/Slant to the bottom of a div. I have had some success, as you can see below in my JSFiddle, I have managed to apply the skew but it's not completely how I wanted it.

https://jsfiddle.net/hcow6kjr/

Currently the Skew is applied to the top and bottom of the div the image resides in, this skew also seems to be applied to the image itself (if you take the skew off, you will see the image slightly rotate back to normal). I was wondering if it's possible to do the following adjustments, and how I may go about them...

1 - Apply the skew to only the bottom of the div the image resides in, not both as currently is.

2 - Not apply the skew to the image, so that the image sits flat horizontal (if that makes sense).

HTML

<div>
<h1>
<img src="http://www.visiontechautomotive.co.uk/visiontech/wordpress/wp-content/uploads/2016/08/visiontech-hero-test-1.jpg">
</h1>
</div>

CSS

div {
  background-image: green;
  height: 700px;
  padding: 20px;
  margin-top: 100px;
  -webkit-transform: skewY(-2deg);
  -moz-transform: skewY(-2deg);
  -ms-transform: skewY(-2deg);
  -o-transform: skewY(-2deg);
  transform: skewY(-2deg);
  overflow:hidden;
}

Thanks in advance.

Solution 1

Give your <img> the opposite skew of your div by adding transform : skewY(2deg);. This will only skew the bottom of your image.

CSS

img {
  -webkit-transform: skewY(2deg);
  -moz-transform: skewY(2deg);
  -ms-transform: skewY(2deg);
  -o-transform: skewY(2deg);
  transform: skewY(2deg);
}

Result

JSFiddle

Solution 2

As an alternative, (if know the color you want the part under the skew to be) you could just cover part of the image at an angle with the "after" pseudo class selector. Here is an example, you will have to mess with the numbers to make it look the way you like, but the general idea is there.

<div class="background"></div>


.background{
    background-image:url('banner.jpg');
    background-size: cover;
    background-position: center;
    height: 460px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.background:after{
    content: '';
    background-color: #fff;
    display: block;
    width: 120%;
    height: 109px;
    left: 0;
    position: absolute;
    right: 0;
    bottom: -47px;
    transform: rotate(-4deg);
}

example of what mine looked like