< Back to Frontend Friday Folks Index

Hippo

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 (904 characters)
1 
<div l></div>
2 
<div l r></div>
3 
<div h></div>
4 
<div y></div>
5 
<div y r></div>
6 
<div s></div>
7 
<div l n></div>
8 
<div l n r></div>
9 
<style>
10 
  body{background:#191919}
11 
  div {
12 
    position:absolute;
13 
    background: #FE5F55;
14 
    height: var(--h);
15 
    width: var(--w);
16 
  }
17 
  [h] {
18 
    top:75;
19 
    left:135;
20 
    border-radius:60px;
21 
    --h:150px;
22 
    --w:130px;
23 
  }
24 
  [s] {
25 
    background:#A64942;
26 
    top:145;
27 
    left:125;
28 
    border-radius:70px 70px 55px 55px;
29 
    --h:100;
30 
    --w:150;
31 
  }
32 
  [y] {
33 
    top:125;
34 
    left:160;
35 
    background:#000;
36 
    border-radius:50%;
37 
    --h:10;
38 
    --w:10;
39 
  }
40 
  [l] {
41 
    background:#000;
42 
    top:75;
43 
    left:145;
44 
    border-radius:50%;
45 
    border: 5px solid #FE5F55;
46 
    rotate:45deg;
47 
    --h:10;
48 
    --w:20;
49 
  }
50 
  [n] {
51 
    border-color: #0000;
52 
    top:170;
53 
    rotate:-45deg
54 
  }
55 
  [r] {
56 
    left:225;
57 
    transform:rotate(90deg);
58 
  }
59 
  [y]+[r] {
60 
    left:230;
61 
  }
62 
</style>
63
I've tried using -webkit-box-reflect, but it doesn't seem to work out with absolute positioning...? Anyways, I think the main idea here is using border radius in pixels and percentages to get to 100%.
< Back to Frontend Friday Folks Index