DEV Community 👩‍💻👨‍💻

Cover image for CSSBattle | #4 Ups n Downs
Nazmuz Shakib Pranto
Nazmuz Shakib Pranto

Posted on

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:

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

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!

Top comments (0)

🌚 Life is too short to browse without dark mode