<div class="banner">
<div class="ribbon"></div>
<div class="ribbon"></div>
<div class="ribbon"></div>
<div class="ribbon"></div>
</div>
.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;
}