Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Slant/Skew only the bottom of the div

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.

like image 812
Chris Avatar asked Aug 16 '16 15:08

Chris


2 Answers

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

enter image description here

JSFiddle

like image 69
Hunter Turner Avatar answered Nov 17 '22 00:11

Hunter Turner


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

like image 32
Heidi Avatar answered Nov 17 '22 01:11

Heidi