< Back to Frontend Friday Folks Index

Evil Cat

Highlighted solution (965 characters)
1
<div h>
2
<div o></div>
3
<div n></div>
4
<div el>
5
  <div p></div>
6
</div>
7
<div er>
8
    <div p></div>
9
</div>
10
</div>
11
<style>
12
  body {
13
    background:#ED6A9D;
14
  }  
15
  [h] {
16
    width: 180px;
17
    height: 150px;
18
    background: #050044;
19
    position: fixed;
20
    top: 90;
21
    left:110;
22
    border-radius:50%
23
  }
24
  [el],[er] {
25
    background: #FFC100;
26
    position:fixed;
27
    top:130;
28
    left: 145;
29
    width: 40;
30
    height: 40;
31
    rotate:-45deg;
32
    border-radius: 0 50%;
33
  }
34
  [er] {
35
    left: 215;
36
  }
37
  [p] {
38
    height:30;
39
    width:10;
40
    background:#050044;
41
    border-radius: 50%;
42
    transform: rotate(45deg) translate(14px,-7px);
43
    position:fixed;
44
  }
45
  [n] {
46
    border:15px solid #0000;
47
    border-top-color:#ED6A9D;
48
    position:fixed;
49
    top:185;
50
    left:185;
51
  }
52
  [o] {
53
    position:fixed;
54
    top:65;
55
    left:120;
56
    right:120;
57
    bottom:100;
58
    background:#050044;
59
    clip-path: polygon(0 0, 80px 50px, 100% 0, 152px 100%, 8px 100%);
60
  }
61
</style>
62

Amy took over today and selected a random puzzle. It took me a few tries, but I finally got to 100%. The ears were problematic for me. I tried rotating them, but only using clip-path seemed to work for 100% for me. I'm wondering whether that's the correct approach or whether I've just not found the right numbers for rotating the ears.
< Back to Frontend Friday Folks Index