< Back to Frontend Friday Folks Index

Letter O

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 (262 characters)
1 
<div w></div>
2 
<style>
3 
  body {background:#926927}
4 
  [w] {
5 
    position: fixed;
6 
    left:160px;
7 
    top:70px;
8 
    width: 60;
9 
    height: 120;
10 
    border: 20px solid #fff;
11 
    border-radius: 30px;
12 
    box-shadow:-20px 0 #6D480A, -20px 0 #6D480A inset;
13 
  }
14 
</style>

Today, I learned a lot. While this thing didn't really look like something new, I learned multiple things today! For example, all of us thought we need a second element inside to create the inner radial of the border. So with this solution I learned:

Using a border-radius larger than the border-size results in inner radius being curved as well.

You can use both default AND inset on box-shadow on the same element.

Highlighted solution (249 characters)
1 
<div w></div>
2 
<style>
3 
  body {background:#926927}
4 
  [w] {
5 
    position: fixed;
6 
    left:160px;
7 
    top:70px;
8 
    width: 60;
9 
    height: 120;
10 
    border: 20px solid #fff;
11 
    border-radius: 30px;
12 
    filter: drop-shadow(-20px 0 #6D480A);
13 
  }
14 
</style>

Instead of using box-shadow, you can use the filter: drop-shadow to have shadows in transparent regions. This allows having just one of them.

Highlighted solution (121 characters)
1 
<style>&{background:#926927;margin:62 33%62 152;*{border:solid+22q#fff;border-radius:32q;filter:drop-shadow(-21q+0#6D480A

Oh and this was the minimal solution I found. No elements necessary!

< Back to Frontend Friday Folks Index