[CSS Battle] 1-9. Tesseract

📍타겟 이미지

- 마블의 그 테서랙트인듯..

tesseract

📍문제 풀이

레이어를 어떻게 쌓으면 좋을까?

(맨 위)

- 원

- 민트 45도 회전 사각형

- 블랙 45도 회전 사각형

- 민트 바
(맨 아래)

 

flex로 간단히 해결 가능

클래스를 활용해서 중복된 스타일을 하나로 묶어준다

(테일윈드 처럼)

 

📍코드

<main class="flex dark full-width">
  <div class="bar flex mint full-width">
    <div class="lg flex dark">
      <div class="sm flex mint">
        <div class="dot"></div>
      </div>
    </div>
  </div>
</main>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  main {
    height: 100%;
  }
  .bar {
    height: 150px;
  }
  .lg {
    width: 250px;
    height: 250px;
    transform: rotate(45deg);
  }
  .sm {
    width: 150px;
    height: 150px;
  }
  .dot {
    width: 50px;
    height: 50px;
    background: #393E46;
    border-radius: 50%;
  }
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .dark {
    background: #222730;
  }
  .mint {
    background: #4CAAB3;
  }
  .full-width {
    width: 100%;
  }
</style>

 

📍결과

100% match