Html 如何获得3个div'；s在一个角下并排

我有这样的想法来调整3个分区：
红色是div1，黄色是div2，绿色是div3。他们肩并肩，但有一个角度。

---

我如何做到这一点？通过CSS？

您可以使用

transform:rotate（）

.parent{
显示器：flex；
溢出：隐藏；
宽度：400px；
高度：200px；
边框：2件纯黑；
}
.盒子{
身高：100%；
变换：倾斜（15度）；
}
.box:第n个孩子（1）{
背景#F40C42；
左边距：-30px；
柔性：0 150像素；
}
.box:第n个孩子（2）{
背景#DBF408；
flex:0170px；
左边框：2倍纯黑；
右边框：2倍纯黑；
}
.box:第n个孩子（3）{
背景#58F40B；
柔性：0 150像素；
}

我应该使用-webkit transform:rotate（-45deg）吗？是的，使用skew

-webkit transform:rotate（45deg）skew（20deg，20deg）

但问题是内容也会被旋转。如何将其用作查看内容的“窗口”？假设每种颜色都是一个内容窗口。内容也会被旋转吗？如何将其用作查看内容的“窗口”？假设每种颜色都是一个内容窗口。您可以在内容上添加相等的负片

transform:rotate（）

，就像刚才看到的那样！谢谢，这正是我想要的。干净的代码，从未见过像“.box:nth child（3）”这样的css编码，看起来既专业又高效。