Comment faire 3 divs biaiser en CSS

Question

Comment faire un 3 div avec distorsion, comme indiqué dans l'image?

J'ai fait ceci:

.cars { 
 
    width: 100%; 
 
    height: 500px; 
 
} 
 

 
.car { 
 
    width: 33.33333333%; 
 
    height: 100%; 
 
    background: #3498db; 
 
    position: relative; 
 
    -webkit-transform: skewx(-10deg); 
 
    -moz-transform: skewx(-10deg); 
 
    -o-transform: skewx(-10deg); 
 
    -ms-transform: skewx(-10deg); 
 
    transform: skewx(-10deg); 
 
    transform-origin: top left; 
 
    float: left; 
 
    display: inline; 
 
} 
 

 
.car:nth-child(2) { 
 
    background: #000 
 
} 
 

 
.car:nth-child(3) { 
 
    background: #ff0000 
 
}

<div class="cars"> 
 
    <div class="car"></div> 
 
    <div class="car"></div> 
 
    <div class="car"></div> 
 
</div>

jsFiddle

div gauche - coin gauche coin droit, à droite incliné

Centre div - coin gauche et à droite incliné

droit div - coin gauche incliné, coin droit droit

Answer 1

Je l'ai utilisé :after classe pseudo de CSS pour ajouter une autre boîte rouge après le dernier, une oblique. Cependant celui-ci ne soit pas incliné, donc « remplissage » du bit de l'inclinaison que vous ne voulez pas:

.car:nth-child(3):after { 
    /* create the box */ 
    content: ""; 
    display: block; 
    /* make it fill the required space */ 
    width: 80%; /* (this is only 80 because it was a bit large at 100) */ 
    height: 100%; 
    background: #ff0000; 
    /* transform it in the opposite direction to counter the -10deg skew of .car */ 
    -webkit-transform: skewx(10deg); 
    -moz-transform: skewx(10deg); 
    -o-transform: skewx(10deg); 
    -ms-transform: skewx(10deg); 
    transform: skewx(10deg); 
    transform-origin: top left; 
    position: relative; 
    right: -20%; /* counteract the 80% width */ 
} 

Je l'ai fait la même chose avec le premier div et :before:

.car:nth-child(3):before{ 
    content: ""; 
    display: block; 
    width: 70%; 
    height: 100%; 
    background: #3498db; 
    -webkit-transform: skewx(10deg); 
    -moz-transform: skewx(10deg); 
    -o-transform: skewx(10deg); 
    -ms-transform: skewx(10deg); 
    transform: skewx(10deg); 
    transform-origin: top left; 
    position: relative; 
    right: 40%; 
} 

.cars { 
 
    width: 100%; 
 
    height: 500px; 
 
    margin-left: 100px; 
 
} 
 
.car { 
 
    width: 33.33333333%; 
 
    height: 100%; 
 
    background: #3498db; 
 
    position: relative; 
 
    -webkit-transform: skewx(-10deg); 
 
    -moz-transform: skewx(-10deg); 
 
    -o-transform: skewx(-10deg); 
 
    -ms-transform: skewx(-10deg); 
 
    transform: skewx(-10deg); 
 
    transform-origin: top left; 
 
    float: left; 
 
    display: inline; 
 
} 
 
.car:nth-child(2) { 
 
    background: #000; 
 
} 
 
.car:nth-child(3) { 
 
    background: #ff0000; 
 
} 
 
.car:nth-child(3):after { 
 
    content: ""; 
 
    display: block; 
 
    width: 70%; 
 
    height: 100%; 
 
    background: #ff0000; 
 
    -webkit-transform: skewx(10deg); 
 
    -moz-transform: skewx(10deg); 
 
    -o-transform: skewx(10deg); 
 
    -ms-transform: skewx(10deg); 
 
    transform: skewx(10deg); 
 
    transform-origin: top left; 
 
    position: relative; 
 
    right: -30%; 
 
} 
 
.car:nth-child(1):before { 
 
    content: ""; 
 
    display: block; 
 
    width: 70%; 
 
    height: 100%; 
 
    background: #3498db; 
 
    -webkit-transform: skewx(10deg); 
 
    -moz-transform: skewx(10deg); 
 
    -o-transform: skewx(10deg); 
 
    -ms-transform: skewx(10deg); 
 
    transform: skewx(10deg); 
 
    transform-origin: top left; 
 
    position: relative; 
 
    right: 40%; 
 
}

<div class="cars"> 
 
    <div class="car first"></div> 
 
    <div class="car"></div> 
 
    <div class="car last"></div> 
 
</div> 
 
<br><br>