Create Div with double diagonal borders
<p>I'm trying to achieve the following lay-out:</p>

<p><a href="https://i.stack.imgur.com/pMEa0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pMEa0.png" alt="Layout Preview"></a></p>

<p><strong>So far</strong> I've used skewed DIVs but I'm stuck at this result:</p>

<p><a href="https://i.stack.imgur.com/L78Fm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L78Fm.jpg" alt="Layout so far"></a></p>

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

<p>The css code I have:</p>

<pre><code>.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;
}
</code></pre>