8위 포킹 크레이지

반응형

CSSBattle 챌린지에 오신 것을 환영합니다!

이 짧은 글에서, 저는 CSSBattle - #8 Forking Crazy 챌린지에 대한 저의 해결책을 살펴봅니다. 나의 사고 과정과 구현 세부 사항에 대한 더 나은 통찰력을 얻으려면 아래의 코드 조각을 참조하세요.

<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>

 

언제나 그렇듯이, 저는 도전의 실행 세부사항에 대한 피드백이나 질문을 환영합니다. 그렇지 않다면, 이것이 유용했기를 바랍니다!