CSS Battle #149 – Earthworm

[missatrox44]

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 – 600.01 {1163}

<div style="--a:a;--h:30;--btl:20px;--btr:20px"></div>
<div style="--a:b;--w:10;--h:10;--cs:round scoop round round;--btr:10px;--bbl:20px;--l:start"></div>
<div style="--a:c;--w:0;"></div>
<div style="--a:d;--w:10;--h:10;--cs:round round round scoop;--btr:20px;--bbl:10px;--l:end"></div>
<div style="--a:e"></div>
<div style="--a:f;--w:10;--h:10;--cs:square scoop round round;--btr:10px;--bbl:20px;--l:start"></div>
<div style="--a:g;--w:40;--btr:20px;--bbr:20px;--l:end"></div>
<style>
  body {
    background: #E38F66;
    display: grid;
    grid-template-areas:
      ". . . . ."
      "a . . . ."
      "b c d . ."
      ". . e . ."
      ". . f g .";
    grid-template-rows: 100px min-content 60px 20px min-content;
    grid-template-columns: 40px min-content 40px min-content 120px;
    place-items: center;
    margin:0;
  }
  div {
    grid-area: var(--a);
    background: #FFFBDA;
    height: var(--h, 0);
    width: var(--w, 0);
    place-self: var(--l, center);
    border: var(--b, 20px) var(--bc,#FFFBDA) solid;
    border-radius: var(--btl,0) var(--btr,0) var(--bbr,0) var(--bbl,0);
    corner-shape: var(--cs, round round round round);
  }
</style>