How make 3 divs skew in css

问题

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

回答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>

来源：https://stackoverflow.com/questions/38289984/how-make-3-divs-skew-in-css

标签

html

css

skew