[CSS Battle - 8] 1-7. Leafy Trail

📍타겟 이미지

 

📍문제 풀이

position: absolute로 모두 겹쳐서 가운데 정렬한 다음 nth child로 left 조절하기!

 

📍코드

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
  body {
    background: #0B2429;
  }
  .container div {
    width: 150px;
    height: 150px;
    border-radius: 100px 0 100px 0;
    background: #dd6b4d;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .container div:nth-child(1) {
    z-index: 0;
    left: 150px;
    background: #1A4341;
  }
  .container div:nth-child(2) {
    z-index: 1;
    background: #998235;
  }
  .container div:nth-child(3) {
    z-index: 2;
    left: 250px;
    background: #F3AC3C;
  }  
</style>

 

📍결과

100% match

 

📍리뷰

:nth-child() 앞에 div를 생략해도 결과는 같다