< Back to Frontend Friday Folks Index

Command Key

Highlighted solution (377 characters)
1 
<div></div>
2 
<style>
3 
  *{background:#191919;overflow:visible;}
4 
  div,div:before,div:after {
5 
    content:'';
6 
    position:fixed;
7 
    inset: 38% 166px;
8 
    width: 50px;
9 
    height: 50px;
10 
    border: 10px solid #5DBCF9;
11 
    -webkit-box-reflect: right -70px;
12 
  }
13 
  div:after {
14 
    border-radius:50% 50% 0;
15 
    translate:-60px -60px;
16 
    -webkit-box-reflect: below 50px;
17 
  }
18 
</style>

This time it was Satoshi and me, but I had a little blocker on my arm, so I had to solve it a day later on my own. I like -webkit-box-reflect, but I'm always a bit surprised how it works - especially when using absolute or fixed positioning and pseudo-elements. I think, I need to look into this more!

I wanted to try solving it using the Unicode character "⌘" as the CSSBattle discussions sometimes say that people are using UTF-8 characters to solve puzzles. I can't make it over 92.1% with this char, so I'm unsure how that works for others.

< Back to Frontend Friday Folks Index