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.

Guthrey

Answer 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

Discernible

Sorry for the late response, thanks a lot for your input that certainly does do the trick. However i have just removed the padding from my jsfiddle and the top started to slant back down again? jsfiddle.net/hcow6kjr/3 – Guthrey

@Guthrey The padding is needed in order to hide part of the skew. If you want your image to closer to the top, you can remove the margin, or even give it a negative value like here. – Discernible

Okay, thank you i understand that. I have been trying to replicate the JSfiddle in my website, except i think i may have issues due to the complexity of the wordpress/rev slider code compared to my simple JS Fiddle. Could you perhaps have a look at my website and give your advice on what im trying to achieve in the slider is do-able? – Guthrey

@Chris, sure I can take a look :) – Discernible

Thanks you, the link is visiontechautomotive.co.uk/visiontech/wordpress , it should be pretty obvious the parts im going wrong. Its the grey van underneath the navigation, and then the grey van is repeated again down the page. I assume one solution will fit all. – Guthrey

So you're assigning the image to the div using CSS instead of having an actual image tag inside of your div. You'll need to have an actual image tag in order for the skew to function properly. – Discernible

I was wondering if that was the case. I don't think there is a way to change how rev slider inputs the images so i think i may have to rethink this slightly. Thanks a lot for all your help Hunter. – Guthrey

Yeah, maybe you could post another question specifying that the image is being added through CSS. Maybe someone else would have a solution. – Discernible

Answer 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

Landgravine