title: How can I prevent width:100vw from causing a scrollbar to appear?
body: <p>I partially got the idea after ready <a href="https://css-tricks.com/snippets/css/css-triangle/" rel="nofollow noreferrer">Chris Coyier's article on hacking up CSS Triangles</a> from object borders.</p>
  <p><strong>IMPORTANT:</strong> Let me first state that I <strong>understand</strong> that in most cases, you would use <code>width:100%</code>, however, I am working with <strong>borders</strong> and you can't use percentages with borders</p>
  <p>I also am really really really trying to <strong>avoid</strong> using JavaScript for this solution. Please refrain from answering with JavaScript solutions as I already know how to do this with JavaScript. I also do not like the idea of setting the body max-width to 100%. I do not want to limit any overflow constraints for this project.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>[class*='section-'] {
      min-height: 100vh;
      padding: 20px;
  }
  
  .section-blue {background-color: blue;}
  .section-red {background-color: red;}
  .section-green {background-color: green;}
  
  [class*='divider-'] {
      display: block;
      width: 0;
      height: 0;
      border-top: 25vh solid transparent;
      border-bottom: 0vh solid transparent;
      border-left: 0vw solid transparent;
      border-right: 100vw solid transparent;
  }
  .divider-blue-red {
      border-top-color: blue;
      border-right-color: red;
  }
  .divider-red-green {
      border-top-color: red;
      border-right-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="section-blue"&gt;[Text Goes Here]&lt;/section&gt;
  &lt;div class="divider-blue-red"&gt;&lt;/div&gt;
  &lt;section class="section-red"&gt;[Text Goes Here]&lt;/section&gt;
  &lt;div class="divider-red-green"&gt;&lt;/div&gt;
  &lt;section class="section-green"&gt;[Text Goes Here]&lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="http://srkdev.azurewebsites.net/stackoverflow-question.html" rel="nofollow noreferrer">Click Here To View Live Demo</a></p>
  <p><strong>GOALS</strong></p>
  <ol>
  <li>Have <code>.divider-blue-red</code> &amp;&amp; <code>.divider-red-green</code> elements extent to 100% of the view window NOT including the scrollbar</li>
  <li>Not use JavaScript (pure CSS solution)</li>
  <li>Not setting body to 'max-width:100%`</li>
  <li>Have a cool fluid design that rolls with the device width and height!</li>
  </ol>