< Back to Frontend Friday Folks Index

Skull

Highlighted solution (1118 characters)
1 
<div class=skull>
2 
  <div class=top></div>
3 
  <div class=bottom></div>
4 
</div>
5 
<style>
6 
  body {
7 
    background: #191919;
8 
    display: grid;
9 
    place-items: center;
10 
  }
11 
  .skull {
12 
    display: grid;
13 
    place-items: center;
14 
  }
15 
  .skull>* {
16 
    background: #4F77FF;
17 
    height: 100px;
18 
    width: 120px;
19 
  }
20 
  .top {
21 
    border-radius: 60px 60px 10px 10px;
22 
    background:
23 
      radial-gradient(circle at 35px 73px, #191919 20px, #0000 0),
24 
      radial-gradient(circle at 85px 73px, #191919 20px, #0000 0),
25 
      radial-gradient(circle at 60px 101px, #191919 10px, #0000 0),
26 
      #4F77FF
27 
    ;
28 
  }
29 
  .bottom {
30 
    width: 80px;
31 
    height: 30px;
32 
    border-radius: 0 0 20px 20px;
33 
    background:
34 
      linear-gradient(90deg, #191919 10px, #0000 0 15px, #191919 0 25px, #0000 0 30px, #191919 0) 20px 25px / 40px 5px no-repeat,
35 
      radial-gradient(circle at 40px 1px, #191919 10px, #0000 0),
36 
      radial-gradient(circle at 25px 25px, #191919 5px, #0000 0),
37 
      radial-gradient(circle at 40px 25px, #191919 5px, #0000 0),
38 
      radial-gradient(circle at 55px 25px, #191919 5px, #0000 0),
39 
      #4F77FF
40 
    ;
41 
  }
42 
</style>
That was "fun" using gradients for the teeth and nose. The linear-gradient creates the long parts of the teeth, using the background color and a transparent one in between. The background size and origin start it at the appropriate pixels. The radial-gradients sit on top of these teeth to create the rounded part of the teeth. The nose had to be split up and needed to be included in both parts: The upper skull and the jar.
< Back to Frontend Friday Folks Index