CSS Battle #7 – Leafy Trail

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

Using before & after – 597.24 {479}

<div></div>
<style>
  body{
    background: #0B2429;
    display: grid;
    place-items: center;
  }
  div::before, div::after, div{
    height: 150px;
    width: 150px;
    border-radius: 100px 0;
  }
  div{
    background: #998235;
    position: relative;
  }
   div::before, div::after{
    content: '';
    position: absolute;
  }
  div::before{
    left: -34%;
    background: #1A4341;
    z-index: -1;
  }
  div::after{
    left: 34%;
    background: #F3AC3C;
  }
</style>

[Narigo]

I had this when I first did this:

Three divs, sharing code - 469 chars

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<style>
  body {background:#0B2429}
  .a {background:#1A4341;left: calc(50% - 125px);}
  .b {background:#998235;left: calc(50% - 75px);}
  .c {background:#F3AC3C;left: calc(50% - 25px);}
  div {
    position: absolute;
    border-radius: calc(200% / 3) 0 calc(200% / 3) 0;
    top: calc(50% - 75px);
    left: calc(50% - 75px);
    height: 150px;
    width: 150px;
    background: #dd6b4d;
  }
</style>

[meg-gutshall]

Nested leaves – 610 {387}

<div class=back>
  <div class=middle>
    <div class=front></div>
  </div>
</div>
<style>
  body { background: #0B2429; }
  .back {
    left: 67px;
    top: 67px;
    background: #1A4341;
  }
  .middle { background: #998235; }
  .front { background: #F3AC3C; }
  div {
    position: relative;
    left: 50px;
    width: 150px;
    height: 150px;
    border-radius: 100px 0;
  }
</style>

Refactored using box-shadow – 632 {265}

<div></div>
<style>
  body { background: #0B2429; }
  div {
    position: relative;
    background: #F3AC3C;
    width: 150px;
    height: 150px;
    box-shadow: -50px 0 #998235, -100px 0 #1A4341;
    border-radius: 100px 0;
    top: 67;
    left: 167;
  }
</style>

Re-refactored and minified – 695.76 {150}

<p><style>body{background:#0B2429}p{margin:75 167;background:#F3AC3C;width:150;height:150;box-shadow:-53Q 0#998235,-106Q 0#1A4341;border-radius:106Q 0