How make 3 divs skew in css - html

Question

How to make a 3 div with distortion, as shown in the picture?
I have made this:
.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
Left div - left corner straight, right corner slanted
Center div - left and right corner slanted
Right div - left corner slanted, right corner straight

Answer 1

I have used CSS's :after pseudo class to add another red box after the last, slanted one. However this one isn't slanted, thus 'filling in' the bit of the slant that you don't want:
.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 */
}
I did the same with the first div, and :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>