CSS Battle #130 – Letter O

[meg-gutshall]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source – <strong>score {characters}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {characters}

your cssbattles code here!

[Narigo]

Code Source – 632.93 {262}

Box shadows can be inset and they are inside the borders!

<div w></div>
<style>
  body {background:#926927}
  [w] {
    position: fixed;
    left:160px;
    top:70px;
    width: 60;
    height: 120;
    border: 20px solid #fff;
    border-radius: 30px;
    box-shadow:-20px 0 #6D480A, -20px 0 #6D480A inset;
  }
</style>

[Narigo]

Code Source – 637.27 {249}

drop-shadow filter is even better for this use-case!

<div w></div>
<style>
  body {background:#926927}
  [w] {
    position: fixed;
    left:160px;
    top:70px;
    width: 60;
    height: 120;
    border: 20px solid #fff;
    border-radius: 30px;
    filter: drop-shadow(-20px 0 #6D480A);
  }
</style>

[Arvind644]

Code Source – 606.64 {430}

<div>
  <div m></div>
</div>
<style>
  body {
    background: #926927;
  }
  body, div {
    display: grid;
    place-items: center;
  }
  div {
    width: 100;
    height: 160;
    background: #FFFFFF;
    border-radius: 30px;
    box-shadow: -20px 0 #6D480A;
    translate: 10px;
  }
  [m] {
    width: 40;
    height: 120;
    background: #926927;
    border-radius: 10px;
    rotate: 180deg;
    translate: -10px;
  }
</style>

[shaishav007]

Code source

<style>
  body {
    background: #926927;
  }
  .zero{
    width:60px;
    height:120px;
    border:20px solid white;
    border-radius:30px;
    filter: drop-shadow(-20px 0px 0px #6D480A);
    transform:translate(152px,62px)
  }
</style>

[meg-gutshall]

First attempt – 640.23 {241}

<div></div>
<style>
  body {
    background: #926927;
    margin: 70 160;
  }
  div {
    width: 60;
    height: 120;
    border: 20px solid #fff;
    border-radius: 30px;
    box-shadow: #6D480A -20px 0, #6D480A -20px 0 inset;
  }
</style>

Refactored and minified! – 689.58 {157}

<p><style>body{background:#926927;margin:70 160;}p{width:60;height:120;border:5vw solid#fff;border-radius:30px;box-shadow:#6D480A -5vw 0,#6D480A -5vw 0 inset

[Narigo]

Minified!

Code Source – 726.24 {121}

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