javascript - 使用 css 和透明度的倾斜 div

Question

我已经看到了几个关于这个的问题，它们似乎都使用纯色背景来创建倾斜，如果这是另一个问题的重复，我很抱歉，我一直在努力寻找这个问题。

问题:我想知道如何倾斜 div 的一侧或两侧以获得下面的最终结果，同时使其跨浏览器兼容和响应。

我附上了下面的两张图片以帮助演示。

注意:如果有人在 div 中有文本，我不希望它倾斜。如果不能单独使用 css，请提供 js 版本。

两张图片:

最终结果:

Answer 1

这在使用 clip-path 和 position: absolute 的 css 中是可能的。(不幸的是，这不适用于 Firefox 或 IE)

div {
    position: absolute;
    top: 0;
    height: 400px;
    width: 500px;
}
.img1 {
    background-image: url(http://i.stack.imgur.com/E9Sl2.jpg);
    -webkit-clip-path: polygon(0 35%, 100% 62%, 100% 0, 0 0);
    clip-path: polygon(0 35%, 100% 62%, 100% 0, 0 0);
}
.img2 {
    background-image: url(http://i.stack.imgur.com/Nl3Fw.jpg);
    -webkit-clip-path: polygon(0 35%, 100% 62%, 100% 100%, 0 100%);
clip-path: polygon(0 35%, 100% 62%, 100% 100%, 0 100%);
}

<div class="img1"></div>
<div class="img2"></div>