Create Div with double diagonal borders

Question

I'm trying to achieve the following lay-out:

So far I've used skewed DIVs but I'm stuck at this result:

Is there a way to stop the skew at the middle and making it go back up?
Or am I aproaching this in a wrong way?

The css code I have:

.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

Use background image , linear-gradient and pseudo elements it is responsive and clean.

Preview:

Demo:

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

Answer 2

If you wouldn't mind using an inline svg, which has pretty good browser support, you could wrap it inside your absolute positioned div. The paragraph inside would have to be absolute positioned as well. Just make sure to add the viewBox and preserveAspectRatio attributes to the svg, this way you can define the points for a polygon as if they were percentage values.

Here is an example.

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

jsBin demo

Inside your main .container add two additional elements,
<div class="slant-top"></div> and <div class="slant-bottom"></div>
Those elements are just holders for :after and :before, -top will buld the "ears" and -bottom will build with those pseudos the "nose".

*{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; 
}

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