我试图扭曲一个div，类似于：
Slant the top of a div using css without skewing text
或者： http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/
Slant the top of a div using css without skewing text
或者： http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/
这是我想要做的一个形象：
基本上，我需要在所有四方面以奇怪的方式倾斜边界。我可以用背景图像来做到这一点，但是我更喜欢某些方法在CSS中执行，所以div可以在宽度和高度上做出反应。我想找到一个适用于旧版浏览器的解决方案，但我明白我不能拥有一切！
在四面线上倾斜边界的最佳方法是什么？ (注意：绿色框底部的边框在中间倾斜，在外面倾斜，我不需要边框做这个，只有一个方向倾斜是好的。)
解决方法
我能够做出非常相似的东西。它可以在所有现代浏览器中运行。
Full Screen Demo —- jsFiddle demo
HTML – 很简单
<div>
<p>text..</p>
</div>
<div>
<p>text..</p>
</div>
<div>
<p>text..</p>
</div>
CSS
div:nth-child(1) {
background: rgb(122,206,122);
height: 140px;
transform: skew(-10deg) rotate(2deg);
-webkit-transform: skew(-10deg) rotate(2deg);
-moz-transform: skew(-10deg) rotate(2deg);
}
div:nth-child(1) p {
transform: skew(10deg) rotate(-2deg);
-webkit-transform: skew(10deg) rotate(-2deg);
-moz-transform: skew(10deg) rotate(-2deg);
padding: 3% 2%;
}
div:nth-child(2) {
border-bottom: 180px solid rgb(233,233,65);
border-left: 8px solid transparent;
border-right: 14px solid transparent;
height: 0;
margin-top: 60px;
transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
}
div:nth-child(2) p {
transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
padding: 3.5% 3%;
}
div:nth-child(3) {
border-top: 140px solid rgb(253,74,74);
border-left: 23px solid transparent;
border-right: 14px solid transparent;
height: 0;
margin-top: 20px;
transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
div:nth-child(3) p {
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
position: absolute;
top: -140px;
padding: 3% 3%;
}
div:nth-child(3):before {
content: '';
width: 124%;
height: 80px;
background: white;
position: absolute;
left: -20%;
bottom: 120px;
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
