CSS Battle #125 – Root Learn

[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!

[meg-gutshall]

First attempt using clip-path – 600.27 {766}

<div><p></div>
<style>
  * {
    background: #EFF2F1;
    margin: 0;
    position: fixed;
  }
  p {
    width: 50;
    height: 60;
    background: #EFF2F1;
    top: 75;
    left: 170;
    border-radius: 0 30px 30px 0;
  }
  div {
    width: 400;
    height: 300;
    background: #1C1C1C;
    clip-path: shape(
      from 110px 60px,
      hline by 110px,
      curve by 5px 90px with 50px 10px / 55px 75px,
      line by 40px 70px,
      line by 25px 15px,
      vline by 5px,
      hline by -60px,
      line by -50px -90px,
      hline by -10px,
      vline by 70px,
      line by 20px 10px,
      vline by 10px,
      hline by -80px,
      vline by -10px,
      line by 20px -10px,
      vline by -140px,
      line by -20px -10px,
      close
    )
  }
</style>

Minified – 603.71 {491}

<div><p></div><style>*{background:#eff2f1;margin:0;position:fixed}p{width:50;height:60;top:75;left:170;border-radius:0 30px 30px 0}div{width:400;height:300;background:#1c1c1c;clip-path:shape(from 110px 60px,hline by 110px,curve by 5px 90px with 53q 10px/55px 75px,line by 5ch 74q,line by 25px 5vh,vline by 5px,hline by -60px,line by -53q -90px,hline by -10px,vline by 74q,line by 5vw 10px,vline by 10px,hline by -5pc,vline by -10px,line by 5vw -10px,vline by -35vw,line by -5vw -10px,close)}

[Narigo]

Code Source – 600.55 {692}

<div></div>
<style>
body{background:#EFF2F1;display:grid;place-items:center;}
div{width:180;height:180;background:#1c1c1c;
    clip-path:shape(evenodd
      from 0 0,
      line to 86px 0,
      arc to 115px 90px of 21px 20px cw,
      line to 155px 160px,
      line to 180px 175px,
      vline by 5px,
      hline by -58px,
      line to 69px 90px,
      hline by -9px,
      vline by 70px,
      line to 80px 170px,
      vline by 10px,
      hline by -80px,
      vline by -10px,
      line to 20px 160px,
      vline by -140px,
      line to 0px 10px,
      vline to 0,
      move to 60px 15px,
      hline by 20px,
      arc to 80px 75px of 1px cw,
      hline by -20px,
    );
</style>