Html 如何在css中使3个div倾斜

如图所示，如何制作带有失真的3 div

我已作出以下声明：

.cars{
宽度：100%；
高度：500px；
}
.汽车{
宽度：33.33333%；
身高：100%；
背景：#3498db；
位置：相对位置；
-webkit变换：skewx（-10度）；
-moz变换：skewx（-10度）；
-o变换：斜交（-10度）；
-ms变换：skewx（-10度）；
变换：skewx（-10度）；
变换原点：左上角；
浮动：左；
显示：内联；
}
.车：第n个孩子（2）{
背景：#000
}
.车：第n个孩子（3）{
背景：#ff0000
}

---

我使用CSS的

：after

伪类在最后一个倾斜的红色框之后添加另一个红色框。但是，这一个不是倾斜的，因此“填充”了您不想要的倾斜部分：

.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{
宽度：100%；
高度：500px；
左边距：100px；
}
.汽车{
宽度：33.33333%；
身高：100%；
背景：#3498db；
位置：相对位置；
-webkit变换：skewx（-10度）；
-moz变换：skewx（-10度）；
-o变换：斜交（-10度）；
-ms变换：skewx（-10度）；
变换：skewx（-10度）；
变换原点：左上角；
浮动：左；
显示：内联；
}
.车：第n个孩子（2）{
背景：#000；
}
.车：第n个孩子（3）{
背景：#ff0000；
}
.车：第n个孩子（3）：之后{
内容：“；
显示：块；
宽度：70%；
身高：100%；
背景：#ff0000；
-webkit变换：skewx（10度）；
-moz变换：skewx（10度）；
-o变换：斜交（10度）；
-ms变换：skewx（10度）；
变换：斜交（10度）；
变换原点：左上角；
位置：相对位置；
右图：-30%；
}
.车：第n个孩子（1）：之前{
内容：“；
显示：块；
宽度：70%；
身高：100%；
背景：#3498db；
-webkit变换：skewx（10度）；
-moz变换：skewx（10度）；
-o变换：斜交（10度）；
-ms变换：skewx（10度）；
变换：斜交（10度）；
变换原点：左上角；
位置：相对位置；
右：40%；
}

如果使用png透明图像的普通3 div会怎么样？。。。让它们彼此重叠。。。你应该上传一把小提琴还是整个代码的样本？包括htmlEvery div是一个链接，所以我需要使用扭曲来创建块，而不仅仅是在一个JSFIDLE链接中，把它放在这里。我在输出中没有看到任何问题，请更详细地描述您的问题。这有帮助吗@Sepack191