< Back to Frontend Friday Folks Index

Piano

Highlighted solution (547 characters)
1 
<z><r></r></z>
2 
<style>
3 
  body {
4 
    display: grid;
5 
    place-items: center;
6 
    background: #F3AC3C;
7 
  }
8 
  z {
9 
    width: 100;
10 
    height: 100;
11 
    background: #F3AC3C;
12 
    outline: 30px #998235 solid;
13 
    rotate: 45deg;
14 
    translate: -2px;
15 
  }
16 
  r {
17 
    position: fixed;
18 
    background: transparent;
19 
    border: 30px #F3AC3C solid;
20 
    width: 100;
21 
    height: 100;
22 
    translate: -95px -95px;
23 
  }
24 
  r::after {
25 
    position: inherit;
26 
    content:'';
27 
    height: 30;
28 
    width: 30;
29 
    translate: 100px 100px;
30 
    background: #1A4341;
31 
  }
32 
</style>
I haven't been around for a bit and this week I was late as well. Meg decided we'll be doing this one, so I got to share this time. It's the first time, I could use outline and get 100%! Too bad I had to add an extra element (or pseudo element at least) to overlap something.
< Back to Frontend Friday Folks Index