CSS Battle #29 – Suffocate

[aishwarya-mali]

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 {character count}</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 {character count}

your cssbattles code here!

[aishwarya-mali]

Box Reflect – 667.3{187}

  *{background:#1A4341;margin:0}
  p{
    width:200;
    height:150;
    background:#F3AC3C;
    -webkit-box-reflect: right;
  }
  [t]{
    border-bottom-right-radius:100px;
  }
  [b]{
    border-top-right-radius:100px;
  }

[meg-gutshall]

First attempt – 603.64 {493}

<div class=one></div>
<div class=two></div>
<div class=three></div>
<div class=four></div>
<style>
  body {
    display: grid;
    place-items: center;
    grid: auto-flow / 1fr 1fr;
    margin: 0;
    background: #1A4341;
  }
  div {
    width: 200px;
    height: 150px;
    background: #F3AC3C;
  }
  .one {
    border-radius: 0 0 100px 0;
  }
  .two {
    border-radius: 0 0 0 100px;
  }
  .three {
    border-radius: 0 100px 0 0;
  }
  .four {
    border-radius: 100px 0 0 0;
  }
</style>

Second attempt – 607.3 {420}

<div class=tl></div>
<div class=tr></div>
<div class=bl></div>
<div class=br></div>
<style>
  body {
    display: flex;
    flex-flow: wrap;
    margin: 0;
    background: #1A4341;
  }
  div {
    width: 200px;
    height: 150px;
    background: #F3AC3C;
  }
  .tl { border-radius: 0 0 100px 0; }
  .tr { border-radius: 0 0 0 100px; }
  .bl { border-radius: 0 100px 0 0; }
  .br { border-radius: 100px 0 0 0; }
</style>

Refactor – 625.95 {287}

<div></div>
<div></div>
<div></div>
<div></div>
<style>
  body {
    background: #1A4341;
    display: flex;
    flex-flow: wrap;
    width: 200%;
    margin: -250px -200px;
  }
  div {
    background: #F3AC3C;
    width: 400px;
    height: 400px;
    border-radius: 100px;
  }
</style>

Refactor and minify – 681.43 {167}

<p><p><p><p><style>body{background:#1A4341;display:flex;flex-flow:wrap;width:200%;margin:-250-200}p{background:#F3AC3C;width:400;height:400;border-radius:25vw;margin:0