<div class="banner">
  <div class="ribbon"></div>
  <div class="ribbon"></div>
  <div class="ribbon"></div>
  <div class="ribbon"></div>
</div>

$blue: #2d4d66;
$purple: #8b506e;
$red: #d6497d;
$orange: #f28781;
$yellow: #d6c68b;
$colors-list: $blue $purple $red $orange $yellow;

html, body {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner {
  margin-left: 90px;
  .ribbon {
    float: left;
    height: 200px;
    width: 60px;
    transform: skew(20deg);
    margin-left: 34px;
    &:before, &:after {
      content: "";
      position: absolute;
      height: 200px;
      width: 60px;
    }
    &:before {
      transform: skew(-25deg);
      margin-left: -47px;
    }
    @each $current-color in $colors-list {
    $i: index($colors-list, $current-color);
      &:nth-child(#{$i - 1}) {
        @if $i == 2 {
          &:after {
            background: $blue;
            transform: skew(0);
            margin-left: -93px;
            z-index: -1;
          }
        }
        background: darken($current-color, 5%);
        &:before { background: $current-color; }
      }
    }
  }
}