CSS Battle #126 – Letter A

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

[Arvind644]

Code Source – 601.45 {589}

<p a></p>
<p></p>
<p b></p>
<p c></p>
<style>
  body {
    background: #62306D;
    display: grid;
    place-items: center;
  }
  p {
    height: 140;
    width: 42;
    background: #FEF9CA;
    position: fixed;
    transform: translate(-30px) skew(-20deg);
  }
  [a] {
    background: #C5B732;
    transform: translate(30px) skew(20deg);
  }
  [c] {
    height: 50;
    width: 52;
    background: #E38F66;
    transform: translate(-24px, 45px) skew(-40deg);
  }
  [b] {
    height: 50;
    width: 52;
    background: #AA445F;
    transform: translate(24px, 45px) skew(40deg);
  }
</style>

[Narigo]

Code Source – 604.45 {472}

<style>
  &{
    background:
      linear-gradient(130deg, #3210 100px, #E38F66 0 140px, #3210 0) 40px 170px / 100% 50px no-repeat,
      linear-gradient(50deg, #3210 100px, #AA445F 0 140px, #3210 0) 89px 170px / 100% 50px no-repeat,
      linear-gradient(110deg, #3210 100.5px, #FEF9CA 0 140.5px, #3210 0) 67px 80px / 100% 140px no-repeat,
      linear-gradient(70deg, #3210 100px, #C5B732 0 140px, #3210 0) 128px 80px / 100% 140px no-repeat,
      #62306D;
  }
</style>

[Arvind644]

Optimized solution using vars

Code Source – 601.98 {557}

<p a></p>
<p></p>
<p b></p>
<p c></p>
<style>
  body {
    background: #62306D;
    display: grid;
    place-items: center;
  }
  p {
    height: 140;
    width: 42;
    background: #FEF9CA;
    position: fixed;
    transform: translate(var(--t,-30px)) skew(var(--s,-20deg));
  }
  [a] {
    --t: 30px; --s: 20deg;
    background: #C5B732;
  }
  [c] {
    height: 50;
    width: 52;
    background: #E38F66;
     --t: -24px, 45px; --s: -40deg;
  }
  [b] {
    height: 50;
    width: 52;
    background: #AA445F;
    --t: 24px, 45px; --s: 40deg;
  }
</style>