How can I prevent width:100vw from causing a scrollbar to appear?
<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>