html - 3个带有倾斜边的div

Question

我正在尝试创建一个并排有 3 个 div 的布局，流体大小（我将分别处理小屏幕尺寸），其中内侧是倾斜的。它应该是这样的：

|_/_/_| or |_/_\_|

两者都可以。我尝试了以下方法，但我认为这不是正确的解决方案。

.holder .mainSelection {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 200px;
    border: 2px solid black;
}
.mainSelection .box {
    height: 100%;
    transform: skew(15deg);
    position: relative;
}
.mainSelection .box:nth-child(1) {
    background: #F40C42;
    margin-left: -30px;
    flex: 0 0 33%;
}
.mainSelection .box:nth-child(2) {
    background: #DBF408;
    flex: 0 0 34%;
    border-left: 2px solid black;
    border-right: 2px solid black;
}
.mainSelection .box:nth-child(3) {
    background: #58F40B;
    flex: 0 0 33%;
}
.mainSelection .box:nth-child(3):after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    background: #58F40B;
    -webkit-transform: skewX(-15deg);
    right: -50px;
}

上面代码的问题是第三个 div 比前两个大。

任何人都可以提出更好的解决方案吗？

标签： htmlcssbootstrap-4skew