歪斜的边框上一个div

Question

我试图歪曲一个div，与此类似： Slant the top of a div using css without skewing text 或本：http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/

这里是什么，我试图做一个形象：

基本上，我需要以奇怪的方式在四边倾斜边界。我可以用背景图像做到这一点，但我更喜欢某种方式在CSS中这样做，因此div可以在宽度和高度上做出响应。我希望找到适用于旧版浏览器的解决方案，但我明白我不能拥有一切！

什么是在所有四面都倾斜边界的最佳方法？ （注意：绿色框底部的边框在中间向下倾斜，在外面向下倾斜，而且我不需要边框来做到这一点，只是朝一个方向倾斜很好。）

Answer 1

I能够使非常相似 ..它适用于所有现代浏览器。

HTML - 很简单

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); 
 
}

<div> 
 
    <p>text..</p> 
 
</div> 
 

 
<div> 
 
    <p>text..</p> 
 
</div> 
 

 
<div> 
 
    <p>text..</p> 
 
</div>

Full Screen Demo ---- jsFiddle demo