obliqua Borders su una Div

Question

Sto cercando di inclinare un div, simile a questo: Slant the top of a div using css without skewing text o questo: http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/

Ecco un'immagine di quello che sto cercando di fare:

Fondamentalmente, ho bisogno di inclinare i bordi in modi strani su tutti e 4 i lati. Posso farlo con le immagini di sfondo, ma preferirei un modo per farlo in CSS così i div possono essere reattivi in ​​larghezza e altezza. Mi piacerebbe trovare una soluzione che funziona con i browser più vecchi, ma capisco che non posso avere tutto!

Quale sarebbe il modo migliore per avere bordi obliqui su tutti e 4 i lati? (Nota: il bordo inferiore della scatola verde si inclina verso l'alto e verso il basso all'esterno, e NON ho bisogno dei bordi per farlo. Solo un taglio in una direzione è buono.)

Answer 1

I è stato in grado di creare qualcosa di simile .. funziona in tutti i browser moderni.

HTML - Abbastanza semplice

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