Confini distorti su un div

Sto cercando di inclinare un div, simile a questo: inclina la parte superiore di un div usando css senza testo inclinato o questo: http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3 /

Ecco un’immagine di ciò che sto cercando di fare:

scatole bordate funky

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 inclinati su tutti e 4 i lati? (Nota: il bordo sul fondo della scatola verde si inclina verso l’alto nel mezzo, e verso il basso all’esterno, e NON ho bisogno dei bordi per farlo, solo una inclinazione in una direzione è buona.)

    Sono stato in grado di creare qualcosa di molto simile .. Funziona con tutti i browser moderni.

    inserisci la descrizione dell'immagine qui

    HTML : piuttosto 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); } 
     

    text..

    text..

    text..

    Inoltre puoi usare “clip-path” e impostare qualsiasi forma tu abbia bisogno. PS JS è solo per la trasformazione ogni 2 secondi.

     var wrapper = document.querySelector(".wrapper"); var textBlock = document.querySelector(".text-block"); function gRI(max) { // getRandomInt return Math.floor(Math.random() * Math.floor(max)); } setInterval(function(){ // new color let newColor = "rgb(" + gRI(255) + "," + gRI(255) + "," + gRI(255) +")"; wrapper.style["background-color"] = newColor; // new shape let newShape = "polygon(" + gRI(40) + "px " + gRI(40) + "px, " + // top left gRI(40) + "px " + "calc(100% - " + gRI(40) + "px), " + // top right "calc(100% - " + gRI(40) + "px) " + "calc(100% - " + gRI(40) + "px), " + "calc(100% - " + gRI(40) + "px) " + gRI(40) + "px " + ")"; textBlock.innerHTML = "clip-path: " + newShape + " 

    background-color: " + newColor; wrapper.style["clip-path"] = newShape; }, 2000)
     .wrapper{ box-sizing: border-box; width: 90%; min-width: 200px; margin: 25px auto; padding: 50px; background-color: lightgray; transition: 0.5s; clip-path: polygon( 25px 25px, 25px calc(100% - 25px), calc(100% - 25px) calc(100% - 25px), calc(100% - 25px) 25px ); } .text-block{ width: 100%; } 
     
    Changes every 2 seconds...