<!-- HTML -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
/* Sass Code */
div{
border-right: 150px solid transparent;
border-bottom: 250px solid transparent;
border-left: 150px solid transparent;
position:absolute;
width: 30px;
height: 30px;
border-top:60px solid transparent;
}
$colors: #d27867, #b4685f, #d17382, #a36579, #9e6f8c, #766f83, #33414d;
@for $i from 1 through length($colors) {
div:nth-child(#{length($colors)}n+#{$i}) {
border-bottom-color: nth($colors, $i);
right: #{$i*25}px;
}
}
div:nth-child(7){
width: 0;
height: 0;
border-top: 60px solid transparent;
right: 179px;
top: 30px;
}