Html Div上的倾斜边框

我试图扭曲一个div，类似于： 或者这个：

下面是我正在尝试做的一幅图像：

基本上，我需要在所有4个边上以奇怪的方式倾斜边界。我可以用背景图像来实现这一点，但我更喜欢用CSS来实现这一点，这样div就可以在宽度和高度上做出响应。我想找到一个能在旧浏览器上运行的解决方案，但我明白我不能拥有一切

---

在所有四条边上都有倾斜的边界的最佳方式是什么？（注意：绿色盒子底部的边框在中间倾斜，在外面倾斜，我不需要边框来做这件事。只是在一个方向上倾斜。）

< P>我能做出非常相似的东西。它适用于所有现代浏览器

HTML-非常简单

div:n子级（1）{
背景：rgb（122206122）；
高度：140像素；
变换：倾斜（-10度）旋转（2度）；
-webkit变换：倾斜（-10度）旋转（2度）；
-莫兹变换：倾斜（-10度）旋转（2度）；
}
分区：第n个孩子（1）p{
变换：倾斜（10度）旋转（-2度）；
-webkit变换：倾斜（10度）旋转（-2度）；
-莫兹变换：倾斜（10度）旋转（-2度）；
填充：3%2%；
}
分区：第n个孩子（2）{
边框底部：180px实心rgb（23323365）；
左边框：8px实心透明；
右边框：14px实心透明；
身高：0；
边缘顶部：60像素；
变换：旋转（3deg）；
-webkit变换：旋转（3deg）；
-moz变换：旋转（3deg）；
}
分区：第n名儿童（2）p{
变换：旋转（-3deg）；
-webkit变换：旋转（-3deg）；
-moz变换：旋转（-3deg）；
填充物：3.5%3%；
}
分区：第n个孩子（3）{
边框顶部：140px实心rgb（253,74,74）；
左边框：23px实心透明；
右边框：14px实心透明；
身高：0；
边缘顶部：20px；
变换：旋转（2deg）；
-webkit变换：旋转（2deg）；
-moz变换：旋转（2deg）；
}
分区：第n名儿童（3）p{
变换：旋转（-2deg）；
-webkit变换：旋转（-2deg）；
-moz变换：旋转（-2deg）；
位置：绝对位置；
顶部：-140px；
填充：3%3%；
}
分区：第n个孩子（3）：之前{
内容：''；
宽度：124%；
高度：80px；
背景：白色；
位置：绝对位置；
左-20%；
底部：120px；
变换：旋转（-2deg）；
-webkit变换：旋转（-2deg）；
-moz变换：旋转（-2deg）；
}

文本

文本

文本

您还可以使用“剪辑路径”设置所需的任何形状。 P.S.JS仅用于每2秒转换一次

var wrapper=document.querySelector（“.wrapper”）；
var textBlock=document.querySelector（“.text block”）；
函数gRI（max）{//getRandomInt
返回Math.floor（Math.random（）*Math.floor（max））；
}
setInterval（函数（）{
//新颜色
让newColor=“rgb（“+gRI（255）+”、“+gRI（255）+”、“+gRI（255）+”）；
wrapper.style[“background color”]=newColor；
//新形状
let newShape=
“多边形（”+
gRI（40）+“px”+gRI（40）+“px”，+//左上角
gRI（40）+“px”+“calc（100%-”+gRI（40）+“px）”，“+//右上角
“计算（100%-”+gRI（40）+“px）”+“计算（100%-”+gRI（40）+“px）”+
“计算（100%-”+gRI（40）+“px）”+gRI（40）+“px”+
")";
textBlock.innerHTML=“剪辑路径：”+新闻形状+
背景色：“+newColor；
wrapper.style[“clip path”]=新闻形状；
}，2000）

.wrapper{
框大小：边框框；
宽度：90%；
最小宽度：200px；
保证金：25像素自动；
填充：50px；
背景颜色：浅灰色；
过渡：0.5s；
剪辑路径：多边形（25px 25px，25px计算（100%-25px），计算（100%-25px）计算（100%-25px），计算（100%-25px）25px）；
}
.文本块{
宽度：100%；
}

每2秒更改一次。。。

有趣的问题。。我不知道是否应该使用

rotate

或

skew

我对这一个很感兴趣——好问题您可以将div向一个方向倾斜，并将文本向后倾斜相同的量。@Paulie\u D这只有在它们不是不规则的情况下才有效。我不想要平行四边形，而是不规则的梯形。绿色的盒子很好用，但是黄色和红色的盒子在小尺寸时都有很多问题。这样地：