.banner {
  width: 400px;
  margin: 50px auto;
}

.ribbon {
  float: left;
  height: 200px;
  width: 60px;
  transform: skew(20deg);
  margin-left: 33px; 
}

.ribbon::before {
  content: "";
  position: absolute;
  height: 200px;
  width: 60px;
  transform: skew(-25deg);
  margin-left: -46px;
}

.ribbon:first-child::after {
  content: "";
  position: absolute;
  float: left;
  height: 200px;
  width: 60px;
  background: #2D4D66; 
  transform: skew(0deg);
  margin-left: -93px;
  z-index: -1;
}

.ribbon:first-child {
  background:  #6B3E55;
}

.ribbon:first-child::before {
  background: #8B506E;
}

.ribbon:nth-child(2) {
  background: #AD4966;
}

.ribbon:nth-child(2)::before {
  background: #D6497D;
}

.ribbon:nth-child(3) {
  background: #CA8768;
}

.ribbon:nth-child(3)::before {
  background: #F28781;
}

.ribbon:nth-child(4) {
  background: #B8AA77;
}

.ribbon:nth-child(4)::before {
  background: #D6C68B;
}