CSS Battle #109 – Curtain

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

[AlexVCS]

Code Source – 644.67 {230}

```html
<div></div>
<style>
  div {
    width: 999;
    height: 900;
    translate: -58px -58px;
    background: linear-gradient(135deg, #0000 275px, #191919 0), radial-gradient(circle, #F6E59C 20px, #191919 0) 0 / 60px 60px;
  }
</style>

</details>

[Narigo]

Code golf version of @AlexVCS version (not even using a div)

Code Source – 723.86 {123}

<style>&{background:linear-gradient(135deg,#0000 216q,#191919 0),radial-gradient(#F6E59C 20px,#191919 0)10px 10px/60px 60px

[Narigo]

Grid solution

Code Source – 621.04 {309}

<div>
  <p><p><p><p>
  <p><p><p><p b>
  <p><p><p b><p b>
  <p>
</div>
<style>
  &{background:#191919}
  div {
    margin:20 12;
    display:grid;
    grid-template-columns:repeat(4,40px);
    gap:20px;
  }
  p{margin:0;width:40;height:40;border-radius:50%;background:#F6E59C}
  [b]{background:#fff0}
</style>