DEV Community

loading...
Cover image for CSS Battle #7 - Leafy Trail

CSS Battle #7 - Leafy Trail

chetan11dev profile image Chetan ・1 min read

So this challenge requires you to be comfortable with absolute positioning, building shapes with border-radius.

Goal

Alt Text

Observation of Goal

A 3 rectangular shape with border-radius at 1 edge on top and bottom.
Nearly centered image (Meaning we can absolutely position and bring it to the center using the top and left)
Shapes overlap after some distance
It is prudent to guess the size of shapes say width and height rather than manually plugging in value. SO first we guess the size and the Code of the solution

Solution

Combining the above observations we can figure out the code looks similar to the below code

<div> </div>
<div> </div>
<div> </div>
<style>
body {
    background: #0B2429;
}

div {
    left: 50%;
    top: 50% ;
    height: 150;
    width: 150;
    border-radius: 100px 0 100px 0;
    position: absolute;
  }

div:nth-child(1) {
    background: #1A4341;
    transform: translate(-125px, -75px);
}

div:nth-child(2) {
    transform: translate(-75px, -75px);
    background: #998235;
}

div:nth-child(3) {
    transform: translate(-25px, -75px);
    background: #F3AC3C;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Do let us know how much time you took to achieve the target by yourself in the comments.

Discussion (0)

pic
Editor guide