CSS Battle #114 – Negative Box

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

Not minified, just gradients

Code Source – 636.22 {252}

<style>
  &{
    background:
      conic-gradient(#172D2C 250deg,#E9AF53 0 290deg,#172D2C 0) 200px -65px / 360px no-repeat,
      linear-gradient(19.9deg,#172D2C 93px,#E9AF53 0 215px,#172D2C 0) 20px 13.5px / 180px no-repeat,
      #172D2C
  }
</style>

[meg-gutshall]

Do you have a reference to & to share? I can't remember the difference between & and *.

[meg-gutshall]

Using clip-path – 628.82 {276}

<p>
<style>
  * {
    margin: 0;
    background: #172D2C;
  }
  p {
    width: 100%;
    height: 100%;
    background: #E9AF53;
    clip-path: polygon(
      5% 90q,
      50% 50%,
      50% 5vw,
      95% 90q,
      50% 50%,
      50% 70vw,
      5% 215px
    );
  }
</style>

Minified – 694.85 {151}

<p><style>*{margin:0;background:#172D2C;p{width:100%;height:100%;background:#E9AF53;clip-path:polygon(5%90q,50%50%,50%5vw,95%90q,50%50%,50%70vw,5%215px