The yellow box at the top works like it should. The one at the bottom does not. The scrolling should stop at the end of the footer, here as black line (and also not extend to the right).

Of course, there could be a way to to this with graphics.  

Is there a solution with CSS?

```css
#mainwrapper {
  max-width: 1000px;
  margin: auto;
  padding-top: 100px;
  position: relative;
}

.top-ci-colorbox {
  position: absolute;
  top: -135px;
  right: 0;
  height: 200px;
  width: 2000px;
  background-color: yellow;
  transform: rotate(-3.5deg);
}

.bottom-ci-colorbox {
  position: absolute;
  bottom: -135px;
  left: 0;
  height: 200px;
  width: 2000px;
  background-color: yellow;
  transform: rotate(-3.5deg);
}

header {
  position: fixed;
  max-width: 1000px;
  top: 0;
}

footer {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid black;
}
```

```html
<div id="mainwrapper">
  <div class="top-ci-colorbox"></div>
  <header>Navigation Here</header>
  <main>
    ...
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>

  </main>
  <footer>Footer Here. Scrolling should stop at black line</footer>
  <div class="bottom-ci-colorbox"></div>
</div>
```

[View on JSFiddle](https://jsfiddle.net/h25d5b8z/12/)