title: How to add two slanted columns inside full-width container
body: <p><strong>I'm after this:</strong> 
  <a href="https://i.stack.imgur.com/HYbC1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HYbC1.jpg" alt="enter image description here"></a></p>
  
  <p>What I have is: </p>
  
  <pre><code>&lt;div class="row slantrow"&gt;
      &lt;div class="row slant-inner"&gt;
          &lt;div class="col-md-6 slant-left"&gt;
              &lt;p&gt;text&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6 slant-right"&gt;
              &lt;p&gt;text in another div&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS: </p>
  
  <pre><code>.slant-left {
  
  }
  .slant-right {
      background-color: antiquewhite;
  }
  .slantrow {
      background-color: bisque;
  }
  .slant-inner {
      width: 1100px;
      margin: 0 auto;
  }
  </code></pre>
  
  <p>I need DIV1 (should be 60% of the width) and DIV2 (should be 40% of the width) combined to have the width of page content.</p>
  
  <p>Problems:</p>
  
  <ol>
  <li>Adding slanted border to the DIV2<br></li>
  <li>Getting the background color of DIV2 to go outside it's parent container</li>
  </ol>
  
  <p>What would be the recommended way to achieve the look from the image?</p>