< Back to Frontend Friday Folks Index

Letter W

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 (525 characters)
1 
<div l></div>
2 
<div u></div>
3 
<style>
4 
  body{background:#E38F66}
5 
  div {
6 
    position:fixed;
7 
    top:70;
8 
    left:95;
9 
    border-radius: 100px;
10 
  }
11 
  [l]{
12 
    width: 0;
13 
    height: 90;
14 
    border: 15px solid #62306D;
15 
    box-shadow:90px 0 0#62306D,180px 0 0#FFFBDA;
16 
  }
17 
  [u]{
18 
    inset:0;
19 
    background:
20 
      radial-gradient(1q at 50%0,#3210 30px, #62306D 0 60px,#3210 0) 95px 170px / 120px 60px no-repeat,
21 
      radial-gradient(1q at 50%0,#3210 30px, #FFFBDA 0 60px,#3210 0) 185px 170px / 120px 60px no-repeat;
22 
  }
23 
</style>

Had to be quick today! The u shapes could probably be made as shadows as well, but I couldn't figure it out to 100%, so I switched to radial gradients.

< Back to Frontend Friday Folks Index