Using transform to change shape of div

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:

However it seems I am unable to work it out properly. My HTML file is as follows:

<!DOCTYPE html>
<html>
  <head>
    <title>Studenten Opiniepanel</title>

    <link rel="stylesheet" type="text/css" href="css/main.css">
  </head>

  <body>
    <section class="container">
      <div class="left-half">
        <article>
          <img src="img/logo-hsv-white.png" alt="Hanze Studentenbelangen Vereniging" />
          <h1>Student aan de Hanzehogeschool Groningen?</h1>

          <button class="subscribe" id="hsv">Inschrijven voor het Studenten Opiniepanel</button>

    </article>
  </div>
      <div class="right-half">
        <article>
          <img src="img/logo-sog-white.png" alt="Studenten Organisatie Groningen" />
          <h1>Student aan de Rijksuniversiteit Groningen?</h1>

          <button class="subscribe" id="sog">Inschrijven voor het Studenten Opiniepanel</button>

        </article>
      </div>
    </section>
  </body>
</html>

And my CSS:

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%;
}

I've already tried using transform: skew() but this only does half the job. What would be the best way of achieving what I've drew in the image?

Solution

Try this:

HTML

<div id="container"></div>

CSS

#container {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: grey;
}

#container:before { 
  content: '';
  position: absolute;
  left: 35%;
  width: 200%; 
  height: 200%; 
  background-color: rgb(255, 255, 255); /* fallback */
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  -webkit-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  transform: rotate(25deg);
}

Here's a Fiddle to demo it out. Adjust as you need.