css battle 250824

📌 사이트

https://cssbattle.dev/

 

📌이미지

구현

- 원 3개를 겹쳐서 상단, 하단 물결 무늬를 구현

- 양측 사이드 배경색과 같은 div를 absolute로 z-index 높여서 배치하여 brown 몸통 측면 가리기

 

코드

<main>
  <div class="columns left-column"></div>
  <div class="circle left-circle"></div>
  <div class="circle mid-circle">
    <div class="eye-box">
      <div class="eye"></div>
      <div class="eye"></div>
    </div>
    <div class="mouse"></div>
  </div>
  <div class="circle right-circle"></div>
  <div class="columns right-column"></div>
</main>
<style>
  body {
    background: #62E383;
    margin: 0;
  }
  main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .circle {
    position: absolute;
    width: 180px;
    height: 180px;
    background: #3B240C;
    border-radius: 50%
  }
  .left-circle {
    left: 40px;
  }
  .right-circle {
    right: 40px;
  }
  .columns {
    width: 100px;
    height: 300px;
    background: #62E383;
    z-index: 10;
    position: absolute;
  }
  .left-column {
    left: 0;
  }
  .right-column {
    right: 0;
  }
  .mid-circle {
    position: relative;
  }
  .eye-box {
    display: flex;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 20;
    top: 60px;
    gap: 40px;
  }
  .eye {
    width: 20px;
    height: 20px;
    background: #62E383;
    border-radius: 50%;
  }
  .mouse {
    width: 80px;
    height: 10px;
    background: #62E383;
    position: absolute;
    left: 50%;
    z-index: 20;
    top: 100px;
    transform: translateX(-50%);
  }
</style>