DEV Community

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.


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


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

<div> </div>
<div> </div>
<div> </div>
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;
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)

Editor guide