title: Shape oblique bottom border of a div
body: <p>I'm building a simple website, and on its landing page I need two backgrounds. For that, I'm using two divs, one on top of the other. So far so good.</p>
  
  <p>The problem is, I want the bottom border of the first div (or the top border of the second) to be oblique. This is a sketch of what I want to do:</p>
  
  <p><img src="https://i.stack.imgur.com/cAwBq.jpg" alt="Sketch"></p>
  
  <p><img src="https://i.stack.imgur.com/UkiEY.png" alt="Layout I need to follow"></p>
  
  <p>Any idea how to accomplish this?</p>
  
  <p>I found this article, but it only works with floating elements, and it doesn't seem stable at all.</p>
  
  <p><a href="http://sarasoueidan.com/blog/css-shapes/" rel="nofollow noreferrer">http://sarasoueidan.com/blog/css-shapes/</a></p>
  
  <p>Thanks in advance!</p>
  
  <p>html:</p>
  
  <pre><code>div class="main-container" id="main-container1"&gt;
      //all kinds of stuff
  &lt;/div&gt;
  
  &lt;div class="main-container" id="main-container2"&gt;
        //all kinds of stuff
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#main-container1{
      background: url(../img/background1.jpg);
      background-position:center;
  
  
  }
  
  #main-container2{
      background: url(../img/background2.jpg);
      background-position:center;
  
  
  }
  </code></pre>