htmlcssresponsive-designborder-box

How can I prevent width:100vw from causing a scrollbar to appear?

I partially got the idea after ready Chris Coyier's article on hacking up CSS Triangles from object borders.

IMPORTANT: Let me first state that I understand that in most cases, you would use width:100%, however, I am working with borders and you can't use percentages with borders

I also am really really really trying to avoid 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.

[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;
}
<section class="section-blue">[Text Goes Here]</section>
<div class="divider-blue-red"></div>
<section class="section-red">[Text Goes Here]</section>
<div class="divider-red-green"></div>
<section class="section-green">[Text Goes Here]</section>

Click Here To View Live Demo

GOALS

  1. Have .divider-blue-red && .divider-red-green elements extent to 100% of the view window NOT including the scrollbar
  2. Not use JavaScript (pure CSS solution)
  3. Not setting body to 'max-width:100%`
  4. Have a cool fluid design that rolls with the device width and height!
Solution

  • One posible solution is to change the way you create the triangles. Instead of the border trick, use a gradient image

    *,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  min-height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 18px;
}
[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;
  height: 25vh;
  width: 100%;
}
.divider-blue-red {
  background: linear-gradient(to right bottom, blue 50%, red 50%);
}
.divider-red-green {
  background: linear-gradient(to right bottom, red 50%, green 50%);
}
    <section class="section-blue">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, nibh vitae dignissim euismod, ex elit consequat est, vitae placerat magna nunc sed lectus. Suspendisse vehicula elementum nulla id dictum. Nulla a efficitur erat. Proin consequat
  justo sit amet ultricies vehicula. Proin facilisis metus a velit volutpat, sit amet rutrum quam commodo. Ut quam justo, congue vel elit commodo, molestie scelerisque nisi. Etiam auctor lacinia pretium. Nulla vel dui et diam dictum dignissim non vitae
  metus. Vivamus arcu arcu, finibus vitae ante nec, porta aliquam nunc. Vivamus pellentesque est in posuere mollis. Aenean non lectus id nunc ultrices gravida.
</section>
<div class="divider-blue-red"></div>
<section class="section-red">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, nibh vitae dignissim euismod, ex elit consequat est, vitae placerat magna nunc sed lectus. Suspendisse vehicula elementum nulla id dictum. Nulla a efficitur erat. Proin consequat
  justo sit amet ultricies vehicula. Proin facilisis metus a velit volutpat, sit amet rutrum quam commodo. Ut quam justo, congue vel elit commodo, molestie scelerisque nisi. Etiam auctor lacinia pretium. Nulla vel dui et diam dictum dignissim non vitae
  metus. Vivamus arcu arcu, finibus vitae ante nec, porta aliquam nunc. Vivamus pellentesque est in posuere mollis. Aenean non lectus id nunc ultrices gravida.
</section>
<div class="divider-red-green"></div>
<section class="section-green">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, nibh vitae dignissim euismod, ex elit consequat est, vitae placerat magna nunc sed lectus. Suspendisse vehicula elementum nulla id dictum. Nulla a efficitur erat. Proin consequat
  justo sit amet ultricies vehicula. Proin facilisis metus a velit volutpat, sit amet rutrum quam commodo. Ut quam justo, congue vel elit commodo, molestie scelerisque nisi. Etiam auctor lacinia pretium. Nulla vel dui et diam dictum dignissim non vitae
  metus. Vivamus arcu arcu, finibus vitae ante nec, porta aliquam nunc. Vivamus pellentesque est in posuere mollis. Aenean non lectus id nunc ultrices gravida.
</section>

    In this solution, usually the divider line between the 2 colors isn't as smooth as in your current solution

    Another workaround could be using calc. Since there are variations in scrol bar width, set a value higher than expected, and use a shadow to fill the (posible) empty space.

    In the browsers with smaller scrool bar, there will be a small amount of horizontal separation on the right. But I don't think this is much noticeable

    *,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  min-height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 18px;
}
[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: calc(100vw - 20px) solid transparent;
		}

		.divider-blue-red
		{
			border-top-color: blue;
			border-right-color: red;
          box-shadow: 20px 0px red;
		}

		.divider-red-green
		{
			border-top-color: red;
			border-right-color: green;
          box-shadow: 20px 0px green;
		}
    <section class="section-blue">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, nibh vitae dignissim euismod, ex elit consequat est, vitae placerat magna nunc sed lectus. Suspendisse vehicula elementum nulla id dictum. Nulla a efficitur erat. Proin consequat
  justo sit amet ultricies vehicula. Proin facilisis metus a velit volutpat, sit amet rutrum quam commodo. Ut quam justo, congue vel elit commodo, molestie scelerisque nisi. Etiam auctor lacinia pretium. Nulla vel dui et diam dictum dignissim non vitae
  metus. Vivamus arcu arcu, finibus vitae ante nec, porta aliquam nunc. Vivamus pellentesque est in posuere mollis. Aenean non lectus id nunc ultrices gravida.
</section>
<div class="divider-blue-red"></div>
<section class="section-red">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, nibh vitae dignissim euismod, ex elit consequat est, vitae placerat magna nunc sed lectus. Suspendisse vehicula elementum nulla id dictum. Nulla a efficitur erat. Proin consequat
  justo sit amet ultricies vehicula. Proin facilisis metus a velit volutpat, sit amet rutrum quam commodo. Ut quam justo, congue vel elit commodo, molestie scelerisque nisi. Etiam auctor lacinia pretium. Nulla vel dui et diam dictum dignissim non vitae
  metus. Vivamus arcu arcu, finibus vitae ante nec, porta aliquam nunc. Vivamus pellentesque est in posuere mollis. Aenean non lectus id nunc ultrices gravida.
</section>
<div class="divider-red-green"></div>
<section class="section-green">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, nibh vitae dignissim euismod, ex elit consequat est, vitae placerat magna nunc sed lectus. Suspendisse vehicula elementum nulla id dictum. Nulla a efficitur erat. Proin consequat
  justo sit amet ultricies vehicula. Proin facilisis metus a velit volutpat, sit amet rutrum quam commodo. Ut quam justo, congue vel elit commodo, molestie scelerisque nisi. Etiam auctor lacinia pretium. Nulla vel dui et diam dictum dignissim non vitae
  metus. Vivamus arcu arcu, finibus vitae ante nec, porta aliquam nunc. Vivamus pellentesque est in posuere mollis. Aenean non lectus id nunc ultrices gravida.
</section>