如何仅倾斜/倾斜 div 的底部答案

【问题标题】：How to Slant/Skew only the bottom of the div如何仅倾斜/倾斜 div 的底部
【发布时间】：2016-12-23 02:03:13
【问题描述】：

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

目前，Skew 应用于图像所在的 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;
}

提前致谢。

【问题讨论】：

标签： html css css-transforms skew

【解决方案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

【讨论】：

很抱歉回复晚了，非常感谢您的意见，这确实可以解决问题。但是，我刚刚从我的 jsfiddle 中删除了填充，并且顶部开始再次向下倾斜？ jsfiddle.net/hcow6kjr/3
@Chris 需要填充以隐藏部分倾斜。如果你想让你的图片更靠近顶部，你可以去掉边距，甚至给它一个负值like here。
好的，谢谢，我明白了。我一直在尝试在我的网站中复制 JSfiddle，但与我的简单 JS Fiddle 相比，我认为由于 wordpress/rev 滑块代码的复杂性，我可能会遇到问题。您能否看看我的网站，并就我试图在滑块中实现的目标提出建议？
@Chris，我可以看看 :)
谢谢，链接是visiontechautomotive.co.uk/visiontech/wordpress，很明显我出了问题的部分。它是导航下方的灰色货车，然后在页面下方再次重复灰色货车。我认为一种解决方案适合所有人。

【解决方案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);
}

example of what mine looked like

【讨论】：