如何倾斜/倾斜div的底部

Question

我一直试图在div的底部添加Skew / Slant。我已经取得了一些成功，正如你在我的JSFiddle中看到的那样，我已经设法应用了偏差，但这并不完全是我想要的。

https://jsfiddle.net/hcow6kjr/

目前，歪斜应用于图像所在的div的顶部和底部，此歪斜似乎也应用于图像本身（如果您关闭歪斜，您将看到图像稍微旋转回正常）。我想知道是否可以进行以下调整，以及我如何去做它们......

1 - 将偏斜应用于图像所在的div的仅底部，而不是当前两者。

2 - 不对图像应用歪斜，使图像水平放置（如果有意义的话）。

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;
}

提前致谢。

Answer 1

通过添加<img>，让您的transform : skewY(2deg);与您的div相反。这只会扭曲图像的底部。

<强> CSS

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

<强>结果

JSFiddle

Answer 2

作为替代，（如果知道您希望歪斜部分的颜色），您可以使用“之后”伪类选择器以一定角度覆盖图像的一部分。 这是一个示例，您必须弄乱数字以使其看起来像自己喜欢的样子，但是总的思路就在那里。

<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