html - 如何在全 Angular 容器内添加两个倾斜的列

我在追求这个：

我所拥有的是：

<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>

和CSS：

.slant-left {

}
.slant-right {
    background-color: antiquewhite;
}
.slantrow {
    background-color: bisque;
}
.slant-inner {
    width: 1100px;
    margin: 0 auto;
}

我需要DIV1（应该是60%的宽度）和DIV2（应该是40%的宽度）的组合，以拥有页面内容的宽度。
问题：
向DIV2添加倾斜边框
使DIV2的背景色超出其父容器
从图像中获得外观的推荐方法是什么？

最佳答案

如果您不需要支持IE，我将使用cssclip-path来实现这一点。

.slantrow {
    position: relative;
    background-color: bisque;
}
.slant-inner {
}
.slant-left {
    width: 60%;
}
.slant-right {
    width: 40%;
    /*background-color: antiquewhite;*/
}

.slant {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* Play with `left` here */
    /* Used -15px, as the default gutter with in BS is 30px, you can adjust this based on your setup */
    left: calc(50% - 15px);
    background-color: antiquewhite;

    /* Play with `calc()` here */
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(0% + 15px) 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(0% + 15px) 100%);
}

<div class="slantrow">
    <div class="slant"></div>

    <div class="container slant-inner">
        <div class="row">
            <div class="col-6 slant-left">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum lectus, lacinia sed facilisis vel, euismod at quam. Pellentesque in urna dui. Duis ut elit id erat interdum tempor. Nam at lectus sit amet dolor interdum cursus a non enim.</p>
            </div>

            <div class="col-6 slant-right">
                <p>Morbi et pretium ex. Ut eros sapien, tincidunt et tincidunt eu, semper in libero. Nunc luctus ornare massa ut porta.</p>
            </div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

关于html - 如何在全 Angular 容器内添加两个倾斜的列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48463304/