I've almost got everything working, but I'm facing a challenge in displaying all 12 sections of the rainbow wheel. I know it's probably something very simple (Occam's razor). I've been following this amazing tutorial on CSS linear gradients: Delve deep into the world of CSS linear gradients but I seem to stumble at the final hurdle.
Check out my Codepen here for a working example: https://codepen.io/snarf1974/pen/aywZZJ
body { background: white; }
.colorWheel {
position: relative;
margin: 1em auto;
/* border: solid 2em white; */
width: 16em; height: 16em;
border-radius: 50%;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background:
linear-gradient(30deg, #9bcb61 36.78%, transparent 36.78%),
linear-gradient(60deg, #f6e04e 68.41%, transparent 68.41%);
/* More linear gradient styles... */
background-repeat: no-repeat;
background-size: 50% 50%;
}
.colorWheel:after {
position: absolute;
top: 50%; left: 50%;
margin: -7em;
width: 14em; height: 14em;
border-radius: 50%;
background: white;
content: '';
}
.center {
text-align: center;
position: absolute;
top: 22%;
transform: translateY(-50%);
padding: 1.5em;
font-size: 1.4em;
font-color: black;
z-index: 1;
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
If anyone can shine some light on this issue, it would be greatly appreciated!