Question

我在此之后：

我拥有的是：

<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的背景颜色超出它的父容器

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

Answer 1

在倾斜左侧和倾斜右侧之间再使用一个div斜面 - 中间，使用与左侧倾斜相同的背景颜色并将其旋转至45度。

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

Answer 2

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

＆＃13;

* { box-sizing: border-box; }

.slantrow {
  background-color: bisque;
}

.slant-inner {
  display: flex;
  width: 1100px;
  margin: 0 auto;
}

.slant-inner p { position: relative; } /* Avoid paragraph being overlapped by the slanted box */

.slant-left {
  width: 60%;
  padding-right: 5%;
}
.slant-right {
  position: relative;
  width: 40%;
  padding-left: 5%;
  background-color: antiquewhite;
}
.slant-right::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  transform-origin: bottom left;
  transform: skewX(10deg);
}

＆＃13;

<div class="row slantrow">
    <div class="row slant-inner">
        <div class="col-md-6 slant-left">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et augue at ipsum semper auctor a ut ante. Vivamus lacinia mollis semper. Aliquam fringilla eros at tortor semper, eget finibus urna tincidunt. Nulla mollis vestibulum elit vitae elementum. Nam lacinia elit id lacus bibendum, eget placerat augue auctor. Fusce viverra odio sapien, et auctor tellus accumsan eget. Duis ullamcorper eget elit nec varius. Nunc a nisl quis nunc bibendum lobortis vitae in risus. Ut eu pellentesque augue. Nulla ut nibh laoreet, egestas velit id, ultrices arcu. Curabitur eget iaculis orci. </p>
        </div>
        <div class="col-md-6 slant-right">
            <p>Aenean varius sollicitudin nulla. Proin in nisi urna. Aliquam ullamcorper dui vitae augue fringilla cursus vel finibus justo. Nullam tortor urna, rutrum et vulputate congue, consequat vitae nunc. Integer sit amet nibh blandit, venenatis velit ut, scelerisque quam. Phasellus quis leo eu quam sagittis egestas vel at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        </div>
    </div>
</div>

＆＃13;

Answer 3

如果您不需要支持IE，请使用css clip-path来实现此目的。

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

如何在全宽容器中添加两个倾斜的列

3 个答案: