Posted on Feb 27, 2022

CSSBattle | #4 Ups n Downs

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #4 Ups n Downs challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

Challenge:

Solution:

<div class="container"> <div class="parent"> <div class="child left"></div> <div class="child center"></div> <div class="child right"></div> </div> </div> <style> * { box-sizing: border-box; padding: 0; margin: 0; } .container { width: 100%; height: 100%; background: #62306D; display: flex; justify-content: center; } .parent { display: flex; align-items: center; } .child { width: 100px; height: 100px; background: #F7EC7D; border-top-left-radius: 50px; border-top-right-radius: 50px; } .left { transform: rotate(-180deg) translateY(-50px); } .center { transform: translateY(-50%); } .right { transform: rotate(-180deg) translateY(-50px); } </style>

Key Takeaway(s):

using flexbox to center children elements vertically and horizontally within a parent container

using transform rotate to flip an element vertically

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!