title: Fitting Diagonal Divs to create a perfect X on page
body: <p>I need a little help with fitting these diagonal divs to page to create a perfect X that I can then click on to bring either side of the X to the foreground through a js onclick to z-index change. I have all that covered but I've never dealt with diagonal div's and can't seem to make them fit to page properly to form a perfect X without getting a scroll bar:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.x1 {
    background-color: #2cb5e8;
    opacity: 0.4;
    transform: skewY(-145deg);
    position: absolute;
    overflow: hidden;
    padding: 10% 44%;
    margin: 10% 0% 0% 0%;
    z-index: 1002;
  }
  
  .x1&gt;.wrapper {
    -webkit-transform: skewY(145deg);
    -moz-transform: skewY(145eg);
    -ms-transform: skewY(145deg);
    -o-transform: skewY(145deg);
    transform: skewY(145deg);
  }
  
  .x2 {
    background-color: #0fb8ad;
    opacity: 0.4;
    transform: skewY(145deg);
    position: absolute;
    overflow: hidden;
    padding: 10% 44%;
    margin: 10% 0% 0% 0%;
    z-index: 1001;
  }
  
  .x2&gt;.wrapper {
    -webkit-transform: skewY(145deg);
    -moz-transform: skewY(145deg);
    -ms-transform: skewY(145deg);
    -o-transform: skewY(145deg);
    transform: skewY(145deg);
  }
  
  .page {
    min-height: 100%;
    min-width: 100%;
    max-height: 100%;
    max-width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="page"&gt;
    &lt;div class="x1"&gt;
      &lt;div class="wrapper"&gt;
        &lt;br&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="x2"&gt;
      &lt;div class="wrapper2"&gt;
        &lt;br&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>