[CSS Battle - 6] 1-5. Acid Rain

타겟 이미지

 

 

제일 먼저 떠오르는 것은 z-index

가운데 낀 요소를 relative position으로 주고 양쪽 요소들을 옮겨볼 수도 있을까 했지만 생각이 나질 않음

 

내 코드

<div class="front rain orange"></div>
<div class="rain beige"></div>
<div class="circle orange"></div>
<style>
  body {
    background: #0B2429;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div {
    position: absolute;
    width: 120px;
    height: 120px;
    background: #dd6b4d;
  }
  .rain {
    border-radius: 50% 0 50% 50%;
  }
  .orange {
    background: #F3AC3C;
  }
  .circle {
    top: 30px;
    left: 200px;
    z-index: 1;
    border-radius: 50%;
  }
  .beige {
    background: #998235;
    z-index: 2;
  }
  .front {
    top: 150px;
    left: 80px;
    z-index: 3;
  }
</style>

 

코드 양을 줄여보려고 클래스도 딱딱 맞아 떨어지는 것이 아니게 조금 지저분하게 했다

 

아웃풋

 

 

결과

Score: 601.04 {625}, 100% match

 

정리

margin 대신 flex layout으로 중앙을 잡은 것으로 byte 수가 조금 늘어난것 같지만.. 이게 더 정확한 방법이라 본다