[CSS Battle - 8] 1-8. Forking Crazy

📍타겟 이미지

Crazing Fork

📍문제 풀이

- 포크의 날카로운 부분은 7개의 div로 구현하여 홀수 번째 부분은 윗부분에 border-radius를 주고

짝수 번째 부분은 아랫부분에 border-radius를 준다

 

- 그런데 간단할 줄 알았는데 까다로운 부분이 생긴다

 

container 부분의 컬러에 따라, 이렇게 모서리를 깎아내도 적용되지 않는 문제가 생긴다

 

- 이를 해결하기 위해 홀수번째 날카로운 부분에만 div를 하나 더 생성해줘야 한다 (배경 layer 추가하여 배경색을 바꿔줘야 함)

 

📍코드

<div class="container">
  <div class="group">
    <div>
      <div class="top"></div>
    </div>
    <div></div>
    <div>
      <div class="top"></div>
    </div>
    <div></div>
    <div>
      <div class="top"></div>
    </div>
    <div></div>
    <div>
      <div class="top"></div>
    </div>
  </div>
  <div class="bar"></div>
</div>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #6592CF;
  }
  .container {
    width: 140px;
    height: 200px;
    background: #060F55;
    border-radius: 0 0 70px 70px;
  }
  .group {
    display: flex;
    width: 100%;
    height: 55%;
  }
  .group > div {
    width: 20px;
    height: 100%;
  }
  .group > div:nth-child(odd) {
    background: #6592CF;
  }
  .group > div:nth-child(even) {
    background: #6592CF;
    border-radius: 0 0 10px 10px
  }
  .top {
    width: 100%;
    height: 100%;
    background: #060F55;
    border-radius: 10px 10px 0 0;
  }
  .bar {
    position: absolute;
    bottom: 0;
    left: 50%;
    background: #060F55;
    width: 20px;
    height: 55px;
    transform: translate(-50%);
  }
</style>

 

📍결과

100% match