< Back to Frontend Friday Folks Index

Happy Tiger

Highlighted solution (1064 characters)
1 
<div e></div><div h></div><div m></div><div n></div>
2 
<style>
3 
  body {
4 
    background: #F3AC3C;
5 
    display:grid;
6 
    place-items:center;
7 
  }
8 
  div {
9 
    position:absolute;
10 
  }
11 
  [e] {
12 
    top:65;
13 
    background:
14 
      radial-gradient(circle at 30px 50%,#1A4341 20px,#998235 0 30px,#0000 0) 0 0 / 110px;
15 
    width:170;
16 
    height:60;
17 
  }
18 
  [h] {
19 
    background:
20 
      radial-gradient(circle at 35px 70px, #1A4341 10px, #0000 0),
21 
      radial-gradient(circle at 115px 70px, #1A4341 10px, #0000 0),
22 
      conic-gradient(from -45deg at 50% 25px, #1A4341 90deg, #998235 0);
23 
    border-radius: 75px 75px 60px 60px;
24 
    width:150;
25 
    height:150;
26 
  }
27 
  [m] {
28 
    top:170;
29 
    width:100;
30 
    height:40;
31 
    border-radius:25px 25px 60px 60px;
32 
    background:
33 
      radial-gradient(circle at 50% 0, #fff 10px, #1A4341 0 20px, #0000 0) -5px 10px / 80% 50% no-repeat,
34 
      radial-gradient(circle at 50% 0, #fff 10px, #1A4341 0 20px, #0000 0) 25px 10px / 80% 50% no-repeat,
35 
      #fff;
36 
  }
37 
  [n] {
38 
    width:10;
39 
    height:20;
40 
    background:#1A4341;
41 
    top:160;
42 
  }
43 
</style>
Lots of gradients! 100% again! Finally! Yes! This time, using background positioning and background sizes to get the correct result.
< Back to Frontend Friday Folks Index