title: How to resize 45deg element to the viewport boundaries
body: <p>I have an unusual problem that i am struggling to solve. I have one element on my page, which I want to serve as a background. I want it to be rotated by 45 degrees, and regardless of the viewport's width, I would like the left and right corner of this square to respectively touch left and right edge of the page. so in other words, the width of the square must be responsive. I don't really know how to calculate the width of the square so the corners don't go beyond the screen area. Is something like this even achievable in CSS?</p>
  
  <p>Here's my code:</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>.container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vw;
    transform: translate3d(-50%, -50%, 0);
  }
  
  .square {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vw;
    background: #000;
    transform: translate3d(-50%, -50%, 0) rotate(45deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="square"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>All together on jsFiddle: <a href="https://jsfiddle.net/y10hkoja/" rel="nofollow noreferrer">https://jsfiddle.net/y10hkoja/</a></p>