< Back to Frontend Friday Folks Index

Door Knob

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 (719 characters)
1 
<div></div>
2 
<style>
3 
  body {
4 
    background: #191919;
5 
    display: grid;
6 
    place-items:center;
7 
  }
8 
  div {
9 
    background: #E08027;
10 
    border:30px solid #824B20;
11 
    border-radius: 50%;
12 
    width: 100px;
13 
    height: 100px;
14 
  }
15 
  div:after {
16 
    content: '';
17 
    position: absolute;
18 
    margin: -10px;
19 
    height: 80px;
20 
    width: 80px;
21 
    border: 20px solid #FFF58F;
22 
    border-top-color: transparent;
23 
    border-left-color: transparent;
24 
    border-radius: 50%;
25 
    background:
26 
      radial-gradient(circle at 80px 80px, #FFF58F 10px, #0000 0) -5px -75px / 200% 200% no-repeat,
27 
      radial-gradient(circle at 80px 80px, #FFF58F 10px, #0000 0) -75px -5px / 200% 200% no-repeat
28 
    ;
29 
    rotate: 45deg;
30 
  }
31 
</style>
32
First time that David joined and he actually managed to get it done on time! My solution here uses radial gradients again, but it's always hard for me to get the right values where the circles need to be put in order to get this half circle shape. Especially when you have to take rotation into account as well...!
< Back to Frontend Friday Folks Index