CSS Battle #152 – Rook

[Narigo]

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]

Ouch, reused a lot from puzzle 151 and ended up having a lot of characters 😅

Code Source – 600 {1307}

<div a></div>
<div b></div>
<div c></div>
<div e></div>
<div d></div>
<style>
  body {
    display: grid;
    place-items: center;
    place-content:center;
    background:#62306D;
    gap:5px;
    
  }
  div {
    height:60;
    width:90;
    border-radius:var(--r,0 0 10px 10px);
    background: #F7EC7D;
  }
  [a]{background:radial-gradient(1q at 5px 5px,#F7EC7D 5px,#0000 0),radial-gradient(1q at 45px 5px,#F7EC7D 5px,#0000 0),radial-gradient(1q at 85px 5px,#F7EC7D 5px,#0000 0),radial-gradient(1q at 15px 40px,#62306D 5px,#0000 0),radial-gradient(1q at 35px 40px,#62306D 5px,#0000 0),radial-gradient(1q at 55px 40px,#62306D 5px,#0000 0),radial-gradient(1q at 75px 40px,#62306D 5px,#0000 0),linear-gradient(90deg,#0000 0 15px,#62306D 0 35px,#0000 0 55px,#62306D 0 75px,#0000 0)0 0/100% 45px no-repeat,linear-gradient(#0000 40px,#F7EC7D 0),linear-gradient(90deg,#F7EC7D 10px,#0000 0 40px,#F7EC7D 0 50px,#0000 0 80px,#F7EC7D 0)0 5px/100% 50px no-repeat;}
  [b]{height:10;width:60;--r:15px 15px 25px 25px;}
  [c]{height:65;width:85;z-index:-1;--r:-5px;position:relative;&:after,&:before{position:absolute;top:-100;left:-177;content:'';background:#62306D;border-radius:50%;width:200;height:200}&:after{left:61}}
  [e]{height:10;width:110;--r:50px}
  [d]{height:25;width:140;--r:20px 20px 10px 10px}
</style>