CSS Battle #25 – Blossom

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

using after – 609.01{398}

<p b><p a>
<style>
[a],
[b]::after {
    border-radius: 50px 0;
}
[a],
[b] {
    position: relative;
}
[a]:after,
[b] {
    border-radius: 0 50px;
}
[a]:after,
[b]::after {
    content: "";
    position: absolute;
}
* {
    background: #998235;
    margin: 0;
}
[b],
[b]::after {
    width: 80;
    height: 100;
    background: #1a4341;
}
[b] {
    top: 60;
    left: 110;
}
[b]::after {
    top: 80;
    left: 100;
}
[a],
[a]:after {
    width: 80;
    height: 60;
    background: #f3ac3c;
}
[a] {
    top: -40;
    left: 210;
}
[a]:after {
    left: -100;
    top: 120;
}

[meg-gutshall]

First run – 600.26 {771}

<div class="top-left"></div>
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
<style>
  body {
    margin: 0;
    background: #998235
  }
  .top-left {
    left: 110px;
    top: 60px;
    height: 100px;
    border-radius: 0 50px 0 50px;
    background: #1A4341;
  }
  .top-right {
    right: 110px;
    top: 60px;
    height: 60px;
    border-radius: 50px 0 50px 0;
    background: #F3AC3C;
  }
  .bottom-left {
    left: 110px;
    bottom: 60px;
    height: 60px;
    border-radius: 0 50px 0 50px;
    background: #F3AC3C;
  }
  .bottom-right {
    right: 110px;
    bottom: 60px;
    height: 100px;
    border-radius: 50px 0 50px 0;
    background: #1A4341;
  }
  div {
    position: absolute;
    width: 80px;
  }
</style>

Refactored – 601.78 {568}

<div class="top left teal"></div>
<div class="top right yellow"></div>
<div class="bottom left yellow"></div>
<div class="bottom right teal"></div>
<style>
  body {
    margin: 0;
    background: #998235
  }
  .yellow {
    height: 60px;
    background: #F3AC3C;
  }
  .teal {
    height: 100px;
    background: #1A4341;
  }
  .bottom { bottom: 60px; }
  .top { top: 60px; }
  .left {
    left: 110px;
    border-radius: 0 50px 0 50px;
  }
  .right {
    right: 110px;
    border-radius: 50px 0 50px 0;
  }
  div {
    position: absolute;
    width: 80px;
  }
</style>

Refactored some more! – 603.71 {491}

<div class="dn r t"></div>
<div class="dn l y"></div>
<div class="up r y"></div>
<div class="up l t"></div>
<style>
  body {
    background: #998235;
  }
  .y {
    height: 60px;
    background: #F3AC3C;
  }
  .t {
    height: 100px;
    background: #1A4341;
  }
  .up { bottom: 60px; }
  .dn { top: 60px; }
  .r {
    left: 110px;
    border-radius: 0 50px 0 50px;
  }
  .l {
    right: 110px;
    border-radius: 50px 0 50px 0;
  }
  div {
    position: fixed;
    width: 80px;
  }
</style>

Refactored EVEN MORE! – 612.46 {364}

<p r t>
<p l y>
<a r y>
<a l t>
<style>
  * {
    background: var(--b, #998235);
    position: fixed;
    width: 80;
    bottom: 60;
  }
  p { top: 44; }
  [y] {
    height: 60;
    --b: #F3AC3C;
  }
  [t] {
    height: 100;
    --b: #1A4341;
  }
  [r] {
    left: 110;
    border-radius: 0 50px;
  }
  [l] {
    right: 110;
    border-radius: 50px 0;
  }
</style>

Minified – 645.1 {229}

<p r t><p l y><a r y><a l t><style>*{background:var(--b,#998235);position:fixed;width:80;bottom:60}p{top:44}[y]{height:60;--b:#F3AC3C}[t]{height:100;--b:#1A4341}[r]{left:110;border-radius:0 50px}[l]{right:110;border-radius:50px 0