CSS Battle #135 – Spikes

[meg-gutshall]

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 (thanks for the help @Arvind644) – 603.64 {493}

<div></div>
<div tr></div>
<div bl></div>
<div br></div>
<style>
  * {
    background: #E3516E;
    margin: 0;
  }

  body {
    display: grid;
    grid: 40px 40px / 90px 90px;
    place-items: center;
    place-content: center;
    gap: 20px;
  }

  div {
    background: linear-gradient(45deg, #3210, #3210 42px, #D9D9D9 42px);
    width: 90;
    height: 40;
    border-radius: 20px;
  }

  [tr] {
    scale: -1 1;
  }

  [bl] {
    scale: 1 -1;
  }

  [br] {
    scale: -1 -1;
  }
</style>

Refactored – 607.73 {414}

<p>
<p t>
<p l>
<p r>
<style>
  * {
    background: #E3516E;
    margin: 0;
  }

  body {
    display: grid;
    grid: 5ch 5ch / 90px 90px;
    place-content: center;
    gap: 5vw;
  }

  p {
    background: linear-gradient(45deg, #3210 42px, #D9D9D9 0);
    width: 90;
    height: 40;
    border-radius: 5vw;
  }

  [t] {
    scale: -1 1;
  }

  [l] {
    scale: 1 -1;
  }

  [r] {
    scale: -1 -1;
  }
</style>

Minified – 632.31 {264}

<p><p t><p l><p r><style>*{background:#e3516e;margin:0}body{display:grid;grid:5ch 5ch/90px 90px;place-content:center;gap:5vw}p{background:linear-gradient(45deg,#3210 42px,#d9d9d9 0);width:90;height:40;border-radius:5vw}[t]{scale:-1 1}[l]{scale:1 -1}[r]{scale:-1 -1

[Narigo]

Code Source – 609.18 {396}

<div></div>
<div></div>
<div></div>
<div></div>
<style>
  body{display:grid;grid-template-columns:50% 50%;gap:20px 10px;margin:100 115;background:#E3516E}
  div {
    width: 75px;
    height: 40px;
    border-radius: 0 20px 20px;
    clip-path:polygon(4px 0, 44px 100%, 100% 100%,100% 0);
    background: #D9D9D9;
  }
  div+div{scale:-1 1}
  div+div+div{scale:1 -1}
  div+div+div+div{scale:-1 -1}```

</details>

[Arvind644]

Code Source – 605.08 {458}

<div></div>
<div o></div>
<div t></div>
<div f></div>
<style>
  body {
    background: #E3516E;
    display: grid;
    place-content: center;
    grid-template-columns: auto auto;
    gap: 20px;
  }
  div {
    width: 70;
    height: 40;
    background: #D9D9D9;
    border-radius: 0 20px 20px 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 56% 100%);
  }
  [o] {
    scale: -1 1;
  }
  [t] {
    scale: 1 -1;
  }
  [f] {
    rotate: 180deg;
  }
</style>

[Narigo]

No gradient? 😭