< 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