title: Using transform to change shape of div
body: <p>I'm trying to create a page where the 'background' is made out of two different divs. Currently, they are split by a vertical line and I am trying to change it to be a diagonal line, representing the image below:</p>
  
  <p><a href="https://i.stack.imgur.com/msTVO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/msTVO.png" alt="two divs"></a></p>
  
  <p>However it seems I am unable to work it out properly. My HTML file is as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Studenten Opiniepanel&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;section class="container"&gt;
        &lt;div class="left-half"&gt;
          &lt;article&gt;
            &lt;img src="img/logo-hsv-white.png" alt="Hanze Studentenbelangen Vereniging" /&gt;
            &lt;h1&gt;Student aan de Hanzehogeschool Groningen?&lt;/h1&gt;
  
            &lt;button class="subscribe" id="hsv"&gt;Inschrijven voor het Studenten Opiniepanel&lt;/button&gt;
  
      &lt;/article&gt;
    &lt;/div&gt;
        &lt;div class="right-half"&gt;
          &lt;article&gt;
            &lt;img src="img/logo-sog-white.png" alt="Studenten Organisatie Groningen" /&gt;
            &lt;h1&gt;Student aan de Rijksuniversiteit Groningen?&lt;/h1&gt;
  
            &lt;button class="subscribe" id="sog"&gt;Inschrijven voor het Studenten Opiniepanel&lt;/button&gt;
  
          &lt;/article&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>html, body {
    margin: 0;
    padding: 0;
  }
  
  * {
    box-sizing: border-box;
  }
  
  body {
    font-size: 1.25rem;
    font-family: sans-serif;
    line-height: 150%;
    text-shadow: 0 2px 2px #b6701e;
  }
  
  section {
    color: #fff;
    text-align: center;
  }
  
  div {
    height: 100%;
  }
  
  article {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 20px;
  }
  
  h1 {
    font-size: 1.75rem;
    margin: 0 0 0.75rem 0;
  }
  
  .container {
    display: table;
    width: 100%;
  }
  
  .left-half {
    background: #f49800;
    position: absolute;
    left: 0px;
    width: 50%;
  }
  
  .right-half {
    background: #F38E09;
    position: absolute;
    right: 0px;
    width: 50%;
  }
  </code></pre>
  
  <p>I've already tried using <code>transform: skew()</code> but this only does half the job. What would be the best way of achieving what I've drew in the image?</p>