如何使3 divs在CSS中倾斜 [英] How make 3 divs skew in css

问题描述

如何使3 div失真，如图所示?

How to make a 3 div with distortion, as shown in the picture?

我做到了:

.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-左上角笔直，右上角倾斜

Left div - left corner straight, right corner slanted

中心div-左和右角倾斜

Center div - left and right corner slanted

右div-左角倾斜，右角直

Right div - left corner slanted, right corner straight

推荐答案

我使用CSS的:after 伪类在最后一个倾斜的红色框之后添加了另一个红色框.但是，此倾斜不是倾斜的，因此可以填充"您不想要的倾斜部分:

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 */
}

我对第一个div和: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>

这篇关于如何使3 divs在CSS中倾斜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！