CSS Battle #131 – Letter W

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

Code Source – 602.68 {525}

<div l></div>
<div u></div>
<style>
  body{background:#E38F66}
  div {
    position:fixed;
    top:70;
    left:95;
    border-radius: 100px;
  }
  [l]{
    width: 0;
    height: 90;
    border: 15px solid #62306D;
    box-shadow:90px 0 0#62306D,180px 0 0#FFFBDA;
  }
  [u]{
    inset:0;
    background:
      radial-gradient(1q at 50%0,#3210 30px, #62306D 0 60px,#3210 0) 95px 170px / 120px 60px no-repeat,
      radial-gradient(1q at 50%0,#3210 30px, #FFFBDA 0 60px,#3210 0) 185px 170px / 120px 60px no-repeat;
  }
</style>

[Arvind644]

Code Source – 601.13 {616}

<div></div>
<div></div>
<div w></div>
<p></p>
<p u></p>
<style>
body {
  background: #E38F66;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
}
p {
  position: absolute;
  border: 30px solid #62306d;
  width: 60;
  height: 60;
  border-radius: 60px;
  translate: -44.9px 20px;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
}
  [u] {
    border-color: #FFFBDA;
    translate: 45px 20px;
    z-index: -1;
  }
  div {
    width: 30;
    height: 120;
    background: #62306D;
    border-radius: 30px;
    translate: 0 -20px;
  }
  [w] {
    background: #FFFBDA;
  }
</style>

[meg-gutshall]

99.9% – 597.12 {538}

<div c><img><img r>
<style>
  * {
    background: #E38F66;
  }
  [c] {
    margin: 70 85;
    width: 315;
  }
  img {
    position: relative;
    width: 124;
    height: 300;
    background: #62306D;
    clip-path: shape(
      from 8vw 5vh,
      arc by -30px 0 of 5vh,
      vline by 90q,
      arc by 30vw 0 of 30px,
      vline by -90q,
      arc by -30px 0 of 5vh,
      vline by 90q,
      arc by -60px 0 of 5vh cw,
      close
    );
    z-index: 2;
  }
  [r] {
    background: #FFFBDA;
    left: -34;
    z-index: 1;
  }
</style>

If at first you don't succeed... – 603.47 {498}

<img w><img p>
<style>
  & {
    background: #E38F66;
    margin: 61 85;
    width: 315;
  }
  img {
    position: relative;
    width: 124;
    height: 300;
    clip-path: shape(
      from 8vw 4vw,
      arc by -30px 0 of 1q,
      vline by 90q,
      arc by 30vw 0 of 1q,
      vline by -90q,
      arc by -30px 0 of 1q,
      vline by 90q,
      arc by -60px 0 of 1q cw
    );
  }
  [p] {
    background: #62306D;
    right: 124;
  }
  [w] {
    background: #FFFBDA;
    left: 90;
  }
</style>

Minified – 617.72 {327}

<img w><img p><style>&{background:#e38f66;margin:61 85;width:315}img{position:relative;width:124;height:300;clip-path:shape(from 8vw 4vw,arc by -30px 0 of 1q,vline by 90q,arc by 30vw 0 of 1q,vline by -90q,arc by -30px 0 of 1q,vline by 90q,arc by -60px 0 of 1q cw)}[p]{background:#62306d;right:124}[w]{background:#fffbda;left:90

[meg-gutshall]

@Narigo @Arvind644 I got to 100%!!