Last week’s CodePen challenge was the Game of Life (the November challenge theme is board games). I created a spinning game wheel with HTML and CSS that was inspired the colorful wheel in the Game of Life.

Like a lot of my previous challenges, this one was primarily CSS, with only a few lines of HTML. I found an example wheel to use to create a circle divided into 10 slices, and while the code worked great, I’m still struggling to figure out exactly what it means. In particular, this property:

background:
  linear-gradient(36deg, #272b66 42.34%, transparent 42.34%) 0 0,
    linear-gradient(72deg, #2d559f 75.48%, transparent 75.48%) 0 0,
    linear-gradient(-36deg, #9ac147 42.34%, transparent 42.34%) 100% 0,
    linear-gradient(-72deg, #639b47 75.48%, transparent 75.48%) 100% 0, 
    linear-gradient(36deg, transparent 57.66%, #e1e23b 57.66%) 100% 100%,
    linear-gradient(72deg, transparent 24.52%, #f7941e 24.52%) 100% 100%,
    linear-gradient(-36deg, transparent 57.66%, #662a6c 57.66%) 0 100%,
    linear-gradient(-72deg, transparent 24.52%, #9a1d34 24.52%) 0 100%, 
    #43a1cd linear-gradient(#ba3e2e, #ba3e2e) 50% 100%;

I’ve decided to make this my first Stack Overflow question because I cannot figure out what the percentages outside the end of the parentheses mean. I understand what’s going on inside the parentheses, but those outside values aren’t coming up in any of my searches.

To make the circle spin, I used transform: rotate, which seems to work pretty well. One of these days, I’ll use Javascript for the animation code, but CSS has been working just fine so far.