< Back to Frontend Friday Folks Index

Poker Chip

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (575 characters)
1 
<div></div>
2 
<style>body{display:grid;place-items:center;background:#998235}
3 
  div {
4 
    width: 210px;
5 
    height: 210px;
6 
    border-radius: 50%;
7 
    background:
8 
      radial-gradient(#0B2429 60px, #FCBE5C 0 70px, #0000 0),
9 
      linear-gradient(#0000 0 90px, #0B2429 0 120px, #0000 0),
10 
      linear-gradient(90deg, #0000 0 90px, #0B2429 0 120px, #0000 0),
11 
      linear-gradient(45deg, #0000 0 133px, #0B2429 0 163px, #0000 0),
12 
      linear-gradient(-45deg, #0000 0 133px, #0B2429 0 163px, #0000 0),
13 
      radial-gradient(#0B2429 80px, #FCBE5C 0 95px, #0B2429 0);
14 
  }
15 
</style>
Savvy Saturday Stylers Slaying CSSBattle.dev is the Saturday version of this. On Nov 18th, 2023, they played the "Poker Chip". I thought this should be easy to do with a dashed border, but when I tried that, it became clear that it's not easy to control the dashed border without using images. Images are forbidden in CSS battles, so this approach fell apart pretty quickly after seeing the dashes being a lot different to what we see here. I ended up using gradients once again... 😅
< Back to Frontend Friday Folks Index