使用双对角线边框创建Div

Question

我试图实现以下布局：

到目前为止我使用了偏斜的DIV但是我坚持这个结果：

有没有办法阻止中间的歪斜并让它重新上升？ 或者我是以错误的方式接受这个？

我的css代码：

.slanted {
  box-sizing: border-box;
  position: relative;
}
.slanted:before, .slanted:after {
  content: "";
  background: white;
  height: 65px;
  transform: skewY(2deg);
  position: absolute;
  left: 0;
  right: 0;
  z-index: 500;
}
.slanted:before{    
  top: -30px;    
}
.slanted:after {
  bottom: -30px;
}

Answer 1

<强> jsBin demo

在主.container内添加两个额外元素，
<div class="slant-top"></div>和<div class="slant-bottom"></div>
这些元素只是:after和:before的持有者，而-top会使＆＃34;耳朵＆＃34;并且-bottom将使用那些伪造成＆＃34; nose＆＃34;。

＆＃13;

＆＃13;

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}

/* COMMONALITIES */
body{background:#322}
.container{
  position:relative;
  padding:0 24px;
}
.bg-white{background:#fff;}
.color-white{color:#fff;}
.padd-v-24{padding-top:24px; padding-bottom:24px;}
.padd-v-72{padding-top:72px; padding-bottom:72px;}


/* SLANTED BORDERS */
.slant-top:before,
.slant-top:after,
.slant-bottom:before,
.slant-bottom:after{
  content: "";
  background: white;
  height: 65px;
  top: -30px; 
  width:50%;
  position: absolute;
  z-index:-1;
  -webkit-backface-visibility: hidden;
}
.slant-top:before,
.slant-bottom:before{    
  left: 0; 
  transform: skewY(2deg);
}
.slant-top:after,
.slant-bottom:after{
  right: 0;
  transform: skewY(-2deg);
}
.slant-bottom:before,
.slant-bottom:after{
  top:auto;
  bottom: -30px; 
}

＆＃13;

<div class="container padd-v-24 bg-white">
  <div class="slant-top"></div>
  <h1>1 Content goes here</h1>
  <div class="slant-bottom"></div>
</div>

<div class="container padd-v-72 color-white">
  <h1>Me no slant, I has padd ;)</h1>
</div>

<div class="container padd-v-24 bg-white">
  <div class="slant-top"></div>
  <h1>2 Content goes here</h1>
  <div class="slant-bottom"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您不介意使用内联svg，它具有非常好的browser support，您可以将其包装在绝对定位的div中。里面的段落也必须是绝对定位的。只需确保将viewBox和preserveAspectRatio属性添加到svg，这样就可以将多边形的点定义为百分比值。

这是一个例子。

body {
  margin: 0;
  font-family: sans-serif;
  background: black;
}

.slanted-wrapper {
  position: relative;
  top: 125px;
  height: 320px;
}

.slanted, .slanted-wrapper p {
  position: absolute;
  top: -5%;
  width:100%;
  height: inherit;
}

.slanted-wrapper p {
  box-sizing: border-box;
  color: gray;
  margin: 0;
  padding: 0 20%;
  text-align: center;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
}

.slanted svg {
  background-color: transparent;
}

.slanted svg .slanted-poly {
  fill: white;
}

<div class="slanted-wrapper">
  <div class="slanted">
    <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none">
      <polygon class="slanted-poly" points="50 25, 100 0, 100 75, 50 100, 0 75, 0 0" />
    </svg>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum porro ut laboriosam, quis odio eos eveniet sapiente quae deserunt? Dolore fugit quaerat iure sequi. Eveniet nisi, quidem dolor molestias est.</p>
</div>

Answer 3

使用background image，linear-gradient和pseudo elements它具有响应性和干净性。

预览

<强>演示：

*{
 box-sizing: border-box
}
body{
 margin:0;
 background: rgba(36, 39, 41, 0.14);
}
section{
 padding: 20px;
 text-align: center
}
article{
 width: 80vw;
 margin: 0 auto;
}

.slanted{
  background: white;
  margin-bottom: 40px;
  position: relative
}
.slanted:before,.slanted:after,
.slanted article:before,.slanted article:after{ 
  content: '';
  position: absolute;
  width: 50%;
  height: 40px
}
.slanted:before,.slanted:after{ 
  top: 100%;
}
.slanted article:before,.slanted article:after{ 
  bottom: 100%;
}
.slanted:before{ 
  left: 0;
  background-image: linear-gradient(to top right, transparent 50%, white 51%);
}
.slanted:after{ 
  right: 0;
  background-image: linear-gradient(to top left, transparent 50%, white 51%);
}
.slanted article:before{ 
  left: 0;
  background-image: linear-gradient(to bottom left, transparent 50%, white 51%);
}
.slanted article:after{ 
  right: 0;
  background-image: linear-gradient(to bottom right, transparent 50%, white 51%);
}

<section>
  <article>
    <h1>what is lorem ipsum</h1>
  </article>
</section>
<section class=slanted>
  <article>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </article>
</section>
<section>
  <article></article>
</section>