Javascript 使用css和透明度的倾斜div

我已经看到了一些关于这个问题的问题，所有这些问题似乎都使用了坚实的背景来创建倾斜，如果这是另一个问题的重复，我很抱歉，我已经尝试了无休止地搜索这个问题

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

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

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

两张图片：

---

最终结果：

这可以在css中使用

剪辑路径

和

位置：绝对

。 （不幸的是，这在Firefox或IE上不起作用）

div{
位置：绝对位置；
排名：0；
高度：400px；
宽度：500px；
}
.img1{
背景图片：url(http://i.stack.imgur.com/E9Sl2.jpg);
-webkit剪辑路径：多边形（0 35%，100%62%，100%0，0 0）；
剪辑路径：多边形（0 35%，100%62%，100%0，0 0）；
}
.img2{
背景图片：url(http://i.stack.imgur.com/Nl3Fw.jpg);
-webkit剪辑路径：多边形（0 35%，100%62%，100%100%，0 100%）；
剪辑路径：多边形（0 35%，100%62%，100%100%，0 100%）；
}

---

这在css中可以使用

剪辑路径

和

位置：绝对

。 （不幸的是，这在Firefox或IE上不起作用）

div{
位置：绝对位置；
排名：0；
高度：400px；
宽度：500px；
}
.img1{
背景图片：url(http://i.stack.imgur.com/E9Sl2.jpg);
-webkit剪辑路径：多边形（0 35%，100%62%，100%0，0 0）；
剪辑路径：多边形（0 35%，100%62%，100%0，0 0）；
}
.img2{
背景图片：url(http://i.stack.imgur.com/Nl3Fw.jpg);
-webkit剪辑路径：多边形（0 35%，100%62%，100%100%，0 100%）；
剪辑路径：多边形（0 35%，100%62%，100%100%，0 100%）；
}

---

在所有现代浏览器中获得此结果的一种方法是使用额外的div，至少包含一个图像

该div将被旋转，溢出隐藏，然后其内部的背景再次以相反方向旋转

.base{
宽度：400px；
高度：300px；
位置：相对位置；
溢出：隐藏；
背景图片：url(http://placekitten.com/1000/750);
背景尺寸：封面；
}
.image2{
位置：绝对位置；
宽度：120%；
身高：70%；
底部：50%；
左-10%；
变换：旋转（15度）；
溢出：隐藏；
}
图2：之后{
内容：“；
位置：绝对位置；
宽度：100%；
身高：140%；
最高：20%；
左：10%；
变换：旋转（-15度）；
背景图片：url(http://placekitten.com/1200/900);
背景尺寸：封面；
}

---

在所有现代浏览器中获得此结果的一种方法是使用额外的div，至少包含一个图像

该div将被旋转，溢出隐藏，然后其内部的背景再次以相反方向旋转

.base{
宽度：400px；
高度：300px；
位置：相对位置；
溢出：隐藏；
背景图片：url(http://placekitten.com/1000/750);
背景尺寸：封面；
}
.image2{
位置：绝对位置；
宽度：120%；
身高：70%；
底部：50%；
左-10%；
变换：旋转（15度）；
溢出：隐藏；
}
图2：之后{
内容：“；
位置：绝对位置；
宽度：100%；
身高：140%；
最高：20%；
左：10%；
变换：旋转（-15度）；
背景图片：url(http://placekitten.com/1200/900);
背景尺寸：封面；
}

---

使用SVG，您可以获得比剪辑路径+其他一些很酷的东西更好的浏览器支持

.clip块{
文本对齐：居中；
}
.夹套{
显示：内联块；
垂直对齐：顶部；
填充：0；
利润率：0.20px；
}
.clip svg{
宽度：0；
身高：0；
}
.clip-svg-1{
宽度：200px；
高度=200px；
-webkit剪辑路径：url（“剪辑多边形”）；
剪辑路径：url（“剪辑多边形”）；
}
.clip-svg-2{
宽度：200px；
高度=200px；
-webkit剪辑路径：url（“clip-polygon2”）；
剪辑路径：url（“clip-polygon2”）；
利润上限：-104px；
}

---

使用SVG，您可以获得比剪辑路径+其他一些很酷的东西更好的浏览器支持

.clip块{
文本对齐：居中；
}
.夹套{
显示：内联块；
垂直对齐：顶部；
填充：0；
利润率：0.20px；
}
.clip svg{
宽度：0；
身高：0；
}
.clip-svg-1{
宽度：200px；
高度=200px；
-webkit剪辑路径：url（“剪辑多边形”）；
剪辑路径：url（“剪辑多边形”）；
}
.clip-svg-2{
宽度：200px；
高度=200px；
-webkit剪辑路径：url（“clip-polygon2”）；
剪辑路径：url（“clip-polygon2”）；
利润上限：-104px；
}

你也可以看看。我不认为这个问题太宽泛。这对我来说非常清楚。请选择一个最能解决你的问题的答案。你也可以看一下。我不认为这个问题可以被认为太宽泛。这对我来说非常清楚。请选择一个最能解决你问题的答案。