<!-- 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; }