Html 如何在全宽容器中添加两个斜柱

我想要这个：

我得到的是：

<div class="row slantrow">
    <div class="row slant-inner">
        <div class="col-md-6 slant-left">
            <p>text</p>
        </div>
        <div class="col-md-6 slant-right">
            <p>text in another div</p>
        </div>
    </div>
</div>

我需要将DIV1（应该是宽度的60%）和DIV2（应该是宽度的40%）结合起来，以获得页面内容的宽度

问题：

向DIV2添加倾斜边框

使DIV2的背景色超出其父容器

---

从图像中获得外观的推荐方法是什么？

在“向左倾斜”和“向右倾斜”之间使用一个与“向左倾斜”背景色相同的div slate中间，并将其旋转到45度

transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);

---

可以使用伪元素来实现此结果。请参阅下面的代码段（有关更准确的结果，请参阅整页）：

*{框大小：边框框；}
斯莱恩罗先生{
背景色：深蓝色；
}
.斜内{
显示器：flex；
宽度：1100px；
保证金：0自动；
}
.倾斜内部p{位置：相对；}/*避免段落被倾斜框重叠*/
.向左倾斜{
宽度：60%；
右：5%；
}
.向右倾斜{
位置：相对位置；
宽度：40%；
左：5%；
背景色：仿古白色；
}
.向右倾斜：：之前{
内容：''；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景色：继承；
变换原点：左下角；
变换：斜交（10度）；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安和奥古斯在同一个拍卖行。拉齐尼亚·莫利斯·森佩尔。阿利奎姆·弗里利亚·厄罗斯在托托·森佩尔，埃吉特·菲尼布斯·乌纳·廷西登。前庭无毛，精髓无毛。Nam lacinia Elite id lacus bibendum，eget Placelat augue auctor。他是一位智者，也是一位智者。Duis Ullamcoroper Elite nec varius。在里苏斯的生命之路。但欧盟佩伦茨克奥古斯。我不知道，我知道，我知道。虎杖

水曲柳。尼西乌纳中的脯氨酸。阿利奎姆·乌兰科珀和奥古斯·弗林蒂利亚·库苏斯·菲尼布斯·胡斯托的生活。玉米饼、芸香和腐肉粥、生命之谜。整数坐在阿梅特·尼布·布兰迪特、维尼纳提斯·维利特、权杖广场。在厄洛斯，狮子座和射手座在一起。Lorem ipsum dolor sit amet，是一位杰出的献身者。产于蒙特斯的天然对虾和马格纳斯虎鲸（Orci varius natoque penatibus et magnis），以及印度虎鲸（nascetur ridiculus mus）

如果您不需要支持IE，我将使用css实现这一点

.slantrow{
位置：相对位置；
背景色：深蓝色；
}
.斜内{
}
.向左倾斜{
宽度：60%；
}
.向右倾斜{
宽度：40%；
/*背景色：仿古白色*/
}
.倾斜{
位置：绝对位置；
排名：0；
右：0；
底部：0；
/*在这里玩“左”*/
/*使用-15px，因为BS中的默认排水沟为30px，您可以根据设置进行调整*/
左：计算（50%-15px）；
背景色：仿古白色；
/*在这里玩'calc（）*/
-webkit剪辑路径：多边形（0%0%，100%0%，100%100%，计算（0%+15px）100%）；
剪辑路径：多边形（0%0%，100%0%，100%100%，计算（0%+15px）100%）；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。做同侧导板，拉齐纳面部，euismod在quam。佩伦茨克在乌尔纳酒后驾车。两个是临时的精英身份证。不，在莱克图斯，阿梅特·多洛·因特杜姆·库苏斯是一个非埃尼姆人

Morbi和pretium ex.Ut eros sapien，tincidunt和tincidunt eu，semper in libero。努克·卢克图斯·奥纳雷·马萨和波尔塔

感谢@dferenc的这种好方法。问题是较长的文本与DIV2重叠，而DIV2应该包含在DIV1中。我刚刚更新了示例以更好地适应较长的文本。请查看css中的内联注释，指出可以自定义以改变倾斜角度的线条。谢谢！我会把你的答案标记为正确答案，因为它帮助我解决了我的问题。现在我需要让整个事情都有反应。

transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);