Angled Background Stripes

clip-path-method.scss

.index-section {
  clip-path: polygon(0 7vw, 0 100%, 100% calc(100% - 7vw), 100% 0); // tip: use vw units to keep the angle consistent
  margin: 0 0 -7vw; // use a negative bottom-margin set at the same height as the amount you’re clipping so you don’t end up with dead space between rows
 
  .wrapper {
    padding: 9vw 0; // tweak as necessary
  }
}

pseudo-content-method.scss

.index-section {
  margin-top: -110px; // pulls the sections together so there aren’t any visible gaps between
  padding: 55px 0; // gives the content some room to breathe

  .wrapper {
    &,
    &:before,
    &:after {
      background-color: #fff5e4;
    }

    &:before,
    &:after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      right: 0;
      transform: skewY(-4deg);
    }

    &:before {
      transform-origin: top left; // “pins” the block to the top left of the parent rather than fitting it inside the box (the right-hand side would be at the top of the parent)
      top: 0;
      z-index: -1; // keeps this underneath the main content
    }

    &:after {
      transform-origin: top right; // “pins” the block to the top right so it’s not too high
      bottom: 0;
      z-index: -2; // ensures that following sections lay on top of this
    }
  }
}