.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;

}