< Back to Frontend Friday Folks Index

Poker Chip

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