DEV Community

Cover image for CSSBattle | #8 Forking Crazy
Nazmuz Shakib Pranto
Nazmuz Shakib Pranto

Posted on

CSSBattle | #8 Forking Crazy

Welcome to CSSBattle Challenges!

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


Challenge:

Forking Crazy Challenge


Solution:

<div class="container">
  <div class="fork">
    <div class="springs">
      <div class="spring fill"></div>
      <div class="spring transparent"></div>
      <div class="spring fill"></div>
      <div class="spring transparent"></div>
      <div class="spring fill"></div>
      <div class="spring transparent"></div>
      <div class="spring fill"></div>
    </div>
    <div class="circular-depth"></div>
    <div class="bottom-handle"></div>
  </div>
</div>

<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .container {
    width: 100%;
    height: 100%;
    background: #6592cf;
    display: flex;
    justify-content: center;
    align-items: end;
  }
  .fork {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bottom-handle {
    width: 20px;
    height: 55px;
    background: #060f55;
    z-index: 1;
  }
  .circular-depth {
    width: 140px;
    height: 100px;
    background: #060f55;
    border-bottom-left-radius: 150px;
    border-bottom-right-radius: 150px;
    transform: translateY(5px);
    z-index: 2;
  }
  .springs {
    width: 140px;
    height: 110px;
    display: flex;
    transform: translateY(15px);
    z-index: 3;
  }
  .spring {
    flex-grow: 1;
  }
  .fill {
    background: #060f55;
    border-radius: calc(140px / 7);
  }
  .transparent {
    background: #6592cf;
    border-radius: calc(140px / 7);
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Key Takeaway(s):

  • tinkering with border-radius properties to create semi-circles
  • using z-index to control element overlaps

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

Top comments (0)