< 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