# CSS Battle: #7 - Leafy Trail



In this article, I will solve a [Leafy Trail](https://cssbattle.dev/play/7) CSS Challenge on [CSS Battle](https://cssbattle.dev/). Let's look at the [problem](https://cssbattle.dev/play/7) first.

## Problem 

We need to create the following container by using CSS Properties only:
![Leafy Trail](https://cssbattle.dev/targets/7.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

### HTML


```html
<div class="leaf left"></div>
<div class="leaf middle"></div>
<div class="leaf right"></div>
```


### CSS

Now let's style the leaves.

<CodeTitle title="styles.css" lang="css"/>
```css
body{
  margin: 0;
  background: #0B2429;
  display: grid;
  place-items: center;
}   
.leaf {
  position: absolute;
  width: 150;
  height: 150;
  border-radius: 100px 0;
} 
.left {
  z-index: 1;
  background: #1A4341;
  margin-left: -100;
}
.middle {
  z-index: 2;
  background: #998235;
} 
.right {
  z-index:3;
  background: #F3AC3C;
  margin-left: 100;
}
```

>Note: In CSS Battle you can use `100` instead of `100px`. You don't need to define `px` in CSS. However, if you are using `rem` or `%`, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info [visit here](https://cssbattle.dev/tips)

>Minify the code or CSS by using any [CSS Minifier](https://www.minifier.org/). It helps you to reduce the characters in the code which will increase the score.

### Codepen

%[https://codepen.io/j471n/pen/Vwbjvrq]

**Timelapse:**
%[https://twitter.com/j471n_/status/1549617202323914752]

### Wrapping up
If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.