DEV Community

Cover image for CSS Battle #7 - Leafy Trail
Olzhas Askar
Olzhas Askar

Posted on

6 5

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (4)

Collapse
 
kiranojhanp profile image
kiranojhanp

My solution

<div></div>
<style>
  body {
    background: #0B2429;
    display: grid;
    place-items: center;
  }
  div,div::before,div::after {
    display: inline-block;
    width: 150px;
    height: 150px;
    background: #998235;
    border-radius: 100px 0;
    content: '';
    position: absolute;
  }
  div::before {
    margin: 0 -50;
    background: #1A4341;
    z-index: -1;
  }
  div::after {
    margin: 0 50;
    background: #F3AC3C;
  }
</style>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
khacho_abram profile image
Khachatur Abramian

I just modify your first code:

body {
margin: 0;
background: #0B2429;
padding: 75px;
}
div {
width: 150px;
height: 150px;
border-radius: 100px 0;
position: absolute;
}
#a {
background: #1A4341;
}
#b {
background: #998235;
left: 125px;
}
#c {
background: #F3AC3C;
left: 175px;
}

Collapse
 
khacho_abram profile image
Khachatur Abramian

also works if cut the margin:0;
and change padding to 67px;

Collapse
 
khacho_abram profile image
Khachatur Abramian

in first example it was good idea using padding
in second the use of asterisk
i will keep in mind this ideas to make shorter my code.

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay