如何倾斜/偏斜div的底部 [英] How to Slant/Skew only the bottom of the div

问题描述

我一直在尝试向div底部添加倾斜/倾斜。我已经取得了一些成功，正如您在下面的JSFiddle中看到的那样，我已经设法应用了偏斜，但是它并不是我想要的完全。

> JSFiddle

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.

解决方案

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

这篇关于如何倾斜/偏斜div的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！