CSS reference for Clocks in divisions of 4, 6, 8, 10, and 12

I was looking on the CSS Wizardry page today to see how clocks work, and realized that the way they're presented on there pretty much doesn't cover how more modern games like Blades in the Dark use clocks. So, since I couldn't find a reference for even clock divisions, I decided to make them myself and I figured I'd share here for anyone else. Basically there's 24 possible combinations, but you'd delete the code segments of the type of clock you don't want. So if you want a clock with 10 divisions, for example, you'd just delete everything except the segments for 0, 1/10, 2/10, 3/10, 4/10, 1/2, 6/10, 7/10, 8/10, 9/10, and 1. I hope that makes sense? Just figured I'd share since the arthimetic to get the right segment angles isn't immediately inuitive, but I left a few comments in the code that should also help. Here's a JSfiddle so you can see it in action. The plus sign is just so you can see where the middle of the clock is. HTML <div class="sheet-clock-section" style="width:90%;"> <input type="radio" value="0" name="attr_clock" class="sheet-clock-cb sheet-clock-0" checked>0.0 <input type="radio" value="1" name="attr_clock" class="sheet-clock-cb sheet-clock-30">1/12 <input type="radio" value="2" name="attr_clock" class="sheet-clock-cb sheet-clock-36">1/10 <input type="radio" value="3" name="attr_clock" class="sheet-clock-cb sheet-clock-45">1/8 <input type="radio" value="4" name="attr_clock" class="sheet-clock-cb sheet-clock-60">1/6 <input type="radio" value="5" name="attr_clock" class="sheet-clock-cb sheet-clock-72">2/10 <input type="radio" value="6" name="attr_clock" class="sheet-clock-cb sheet-clock-90">1/4 <input type="radio" value="7" name="attr_clock" class="sheet-clock-cb sheet-clock-108">3/10 <input type="radio" value="8" name="attr_clock" class="sheet-clock-cb sheet-clock-120">2/6 <input type="radio" value="9" name="attr_clock" class="sheet-clock-cb sheet-clock-135">3/8 <input type="radio" value="10" name="attr_clock" class="sheet-clock-cb sheet-clock-144">4/10 <input type="radio" value="11" name="attr_clock" class="sheet-clock-cb sheet-clock-150">5/12 <input type="radio" value="12" name="attr_clock" class="sheet-clock-cb sheet-clock-180">1/2 <input type="radio" value="13" name="attr_clock" class="sheet-clock-cb sheet-clock-210">7/12 <input type="radio" value="14" name="attr_clock" class="sheet-clock-cb sheet-clock-216">6/10 <input type="radio" value="15" name="attr_clock" class="sheet-clock-cb sheet-clock-225">5/8 <input type="radio" value="16" name="attr_clock" class="sheet-clock-cb sheet-clock-240">4/6 <input type="radio" value="17" name="attr_clock" class="sheet-clock-cb sheet-clock-256">7/10 <input type="radio" value="18" name="attr_clock" class="sheet-clock-cb sheet-clock-270">3/4 <input type="radio" value="19" name="attr_clock" class="sheet-clock-cb sheet-clock-288">8/10 <input type="radio" value="20" name="attr_clock" class="sheet-clock-cb sheet-clock-300">5/6 <input type="radio" value="21" name="attr_clock" class="sheet-clock-cb sheet-clock-315">7/8 <input type="radio" value="22" name="attr_clock" class="sheet-clock-cb sheet-clock-324">9/10 <input type="radio" value="23" name="attr_clock" class="sheet-clock-cb sheet-clock-330">11/12 <input type="radio" value="24" name="attr_clock" class="sheet-clock-cb sheet-clock-360">1.0 <hr> <div class="sheet-clock"></div> </div> CSS .sheet-clock-section { display: inline-block; text-align: center; } .sheet-clock { width: 4em; height: 4em; display: inline-block; border-radius: 50%; background: white; border: 2px solid black; } .sheet-clock::after { font-family: "Pictos"; content: "&"; color: var(--cp-white); position: relative; top: 1.25em; } .sheet-clock-cb.sheet-clock-0:checked ~ .sheet-clock { background: black; } .sheet-clock-cb.sheet-clock-30:checked ~ .sheet-clock { background-image: linear-gradient(120deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 120 - 90 = 30*/ } .sheet-clock-cb.sheet-clock-36:checked ~ .sheet-clock { background-image: linear-gradient(126deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 126 - 90 = 36*/ } .sheet-clock-cb.sheet-clock-45:checked ~ .sheet-clock { background-image: linear-gradient(135deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 135 - 90 = 45*/ } .sheet-clock-cb.sheet-clock-60:checked ~ .sheet-clock { background-image: linear-gradient(150deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 150 - 90 = 60*/ } .sheet-clock-cb.sheet-clock-72:checked ~ .sheet-clock { background-image: linear-gradient(162deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 162 - 90 = 72*/ } .sheet-clock-cb.sheet-clock-90:checked ~ .sheet-clock { background-image: linear-gradient(180deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 180 - 90 = 90*/ } .sheet-clock-cb.sheet-clock-108:checked ~ .sheet-clock { background-image: linear-gradient(198deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 198 - 90 = 108*/ } .sheet-clock-cb.sheet-clock-108:checked ~ .sheet-clock { background-image: linear-gradient(198deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 198 - 90 = 108*/ } .sheet-clock-cb.sheet-clock-120:checked ~ .sheet-clock { background-image: linear-gradient(210deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 210 - 90 = 120*/ } .sheet-clock-cb.sheet-clock-135:checked ~ .sheet-clock { background-image: linear-gradient(225deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 225 - 90 = 135*/ } .sheet-clock-cb.sheet-clock-144:checked ~ .sheet-clock { background-image: linear-gradient(234deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 234 - 90 = 144*/ } .sheet-clock-cb.sheet-clock-150:checked ~ .sheet-clock { background-image: linear-gradient(240deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 240 - 90 = 150*/ } .sheet-clock-cb.sheet-clock-180:checked ~ .sheet-clock { background-image: linear-gradient(270deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 270 - 90 = 180 */ } .sheet-clock-cb.sheet-clock-210:checked ~ .sheet-clock { background-image: linear-gradient(120deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 120 + 90 = 210*/ } .sheet-clock-cb.sheet-clock-216:checked ~ .sheet-clock { background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 126 + 90 = 216*/ } .sheet-clock-cb.sheet-clock-225:checked ~ .sheet-clock { background-image: linear-gradient(135deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 135 + 90 = 225*/ } .sheet-clock-cb.sheet-clock-240:checked ~ .sheet-clock { background-image: linear-gradient(150deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 150 + 90 = 240*/ } .sheet-clock-cb.sheet-clock-256:checked ~ .sheet-clock { background-image: linear-gradient(166deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 166 + 90 = 256*/ } .sheet-clock-cb.sheet-clock-270:checked ~ .sheet-clock { background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 180 + 90 = 270*/ } .sheet-clock-cb.sheet-clock-288:checked ~ .sheet-clock { background-image: linear-gradient(198deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 198 + 90 = 288*/ } .sheet-clock-cb.sheet-clock-300:checked ~ .sheet-clock { background-image: linear-gradient(210deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 210 + 90 = 300*/ } .sheet-clock-cb.sheet-clock-315:checked ~ .sheet-clock { background-image: linear-gradient(225deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 225 + 90 = 315*/ } .sheet-clock-cb.sheet-clock-324:checked ~ .sheet-clock { background-image: linear-gradient(234deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 234 + 90 = 324*/ } .sheet-clock-cb.sheet-clock-330:checked ~ .sheet-clock { background-image: linear-gradient(240deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 240 + 90 = 330*/ } .sheet-clock-cb.sheet-clock-360:checked ~ .sheet-clock { background-color: white; } Here's a JSfiddle so you can see it in action. The plus sign is just so you can see where the middle of the clock is.

Ok so after some more fiddling I found a way to get the checkboxes around in a circle so it's a more function clock, rather than just being a visual representation of a radio menu. Here it is in action <a href="https://jsfiddle.net/gxv4yapz/3/" rel="nofollow">https://jsfiddle.net/gxv4yapz/3/</a> and this is what it looks like in the character sheet for ICON that I'm currently working on The method uses a grid with an offset for each checkmark and the 'accent-color' styling to get the buttons to match my background color since I couldn't figure out how to style the buttons normally. (None of the usual methods seemed to work in this particular instance, and I have no idea why).