CSS Diamond Ring

JADE
.container - for (var i = 0; i < 12; ++i) .diamond(class='color-' + i) &#128141
CSS
.color-0 { -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); } .color-1 { -webkit-filter: hue-rotate(30deg); filter: hue-rotate(30deg); } .color-2 { -webkit-filter: hue-rotate(60deg); filter: hue-rotate(60deg); } .color-3 { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); } .color-4 { -webkit-filter: hue-rotate(120deg); filter: hue-rotate(120deg); } .color-5 { -webkit-filter: hue-rotate(150deg); filter: hue-rotate(150deg); } .color-6 { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); } .color-7 { -webkit-filter: hue-rotate(210deg); filter: hue-rotate(210deg); } .color-8 { -webkit-filter: hue-rotate(240deg); filter: hue-rotate(240deg); } .color-9 { -webkit-filter: hue-rotate(270deg); filter: hue-rotate(270deg); } .color-10 { -webkit-filter: hue-rotate(300deg); filter: hue-rotate(300deg); } .color-11 { -webkit-filter: hue-rotate(330deg); filter: hue-rotate(330deg); } .diamond { color: #855223; display: inline-block; font-size: 8em; } .container { width: 35em; } body { height:100vh; display: flex; align-items: center; justify-content: center; }
JAVASCRIPT
Expand for more options Login