Skewed Grenzen zum Div

Question

Ich versuche, ein div, ähnlich wie dies Skew: Slant the top of a div using css without skewing text oder dies: http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/

Hier ist ein Bild von dem, was ich zu tun habe versucht:

Grundsätzlich muss ich die Grenzen auf seltsame Weise auf alle 4 Seiten schräg stellen. Ich kann dies mit Hintergrundbildern tun, aber ich würde eine Möglichkeit bevorzugen, dies in CSS zu tun, so dass die divs in Breite und Höhe reagieren können. Ich würde gerne eine Lösung finden, die auf älteren Browsern funktioniert, aber ich verstehe, dass ich nicht alles haben kann!

Was wäre der beste Weg, abgeschrägte Ränder auf allen 4 Seiten zu haben? (Hinweis: der Rand auf der Unterseite der grünen Box schräg in der Mitte und unten auf der Außenseite, und ich brauche nicht die Grenzen, dies zu tun. Nur eine Neigung in eine Richtung ist gut.)

Answer 1

I war in der Lage, etwas sehr ähnlich zu machen .. es funktioniert in allen modernen Browsern.

HTML - Ganz einfach

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