如何只倾斜 div 底部

Question

我一直在尝试在 div 底部添加倾斜/斜坡。 我有些成功了，正如您可以在我的 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;
}

提前致谢。

- Chris

Answer 1

通过添加transform: skewY(2deg);，使您的<img>倾斜方向与div相反。这将只会使图片底部倾斜。

CSS

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

结果

JSFiddle

- Hunter Turner

---

抱歉回复晚了，非常感谢您的输入，肯定可以解决问题。但是我刚刚从我的jsfiddle中删除了填充，顶部又开始向下倾斜了？https://jsfiddle.net/hcow6kjr/3/ - Chris

好的，谢谢，我明白了。我一直在尝试在我的网站上复制JSfiddle，但是我认为由于WordPress/Rev Slider代码的复杂性与我的简单JS Fiddle相比，可能会出现问题。您能否看一下我的网站，并就我在幻灯片中尝试实现的内容给出建议？ - Chris

@Chris，当然可以，我可以看一下 :) - Hunter Turner

我在想是否是这样的情况。我认为没有办法改变 rev slider 输入图像的方式，所以我认为我可能需要稍微重新考虑一下。非常感谢你的帮助 Hunter。 - Chris

是的，也许你可以发布另一个问题，明确指出图像是通过CSS添加的。也许其他人会有解决方案。 - Hunter Turner

Answer 2

作为替代方案，（如果你知道你想要的斜线下部分的颜色），你可以使用“after”伪类选择器来覆盖图像的一部分。 以下是一个示例，您需要调整数字以使其看起来符合您的喜好，但是基本思路在这里。

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

这是我的样例

此处展示了一张图片，点击链接可以查看。

- Heidi