CSS Battle #7 - Leafy Trail

Here is the seventh one. Half of the challenges are behind. This one is the first to reuse the colors of the previous task, number five, to be precise. Anyways, I really like the composition of the colors used throughout the battles and hope one day to be cool with colors.

1. Z-Index

The first solution relies on the precise placement of the divs. First we describe a common div with its width, height and border-radius and afterward, we use position: absolute to allow positioning regardless of the neighbor elements. The absolute here can be safely replaced by fixed to save some characters if you fancy. Now to stack the elements we use z-index yet again. You know, the higher the number, the more is the element on the front. And since we already defined our content box with padding: 75px on the body, our only movements will be playing around with the left margins.

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

<style>
  body {
    margin: 0;
    background: #0B2429;
    padding: 75px;
  }
  div {
    width: 150px;
    height: 150px;
    border-radius: 100px 0;
    position: absolute;
  }
  #a {
    background: #1A4341;
    z-index: 1;
  }
  #b {
    background: #998235;
    z-index: 2;
    margin-left: 50px;
  }
  #c {
    background: #F3AC3C;
    z-index: 3;
    margin-left: 100px;
  }
</style>

2. Box Shadows

If somebody will ask, what I've learned from doing the CSS battle, I'd probably respond with "Box Shadows". This single technique keeps appearing throughout the challenges, often resulting in shorter solutions. And mostly these solutions also appear more idiomatic to me personally.
Here again, we use box shadows. The only gotcha here is that each subsequent shadow is placed behind the previous one, so to achieve the wanted appearance we should start with the rightmost leaf.
Notice how some of the values are defined with vh and vw - that is to save the battle characters. In the end, 50vh is one character shorter than 150px and doing this trick 4 times in our case, we save 4 characters.

<div></div>

<style>
* {
    background: #0B2429;
}

div {
    background: #F3AC3C;
    width: 50vh;
    height: 50vh;
    border-radius: 25vw 0;
    margin: 75px 167px;
    box-shadow: -50px 0 #998235, -25vw 0 #1A4341;
}
</style>

Which one of these solutions would you prefer? Do you know any others?