CSSBattle Apr 24, 2025

풀이

체크무늬와 가로줄 하나로 그릴 수 있다고 생각했어요.
구글링 해보니 체스판 모양을 만드는 방법이 여러개 있었는데, conic-gradient를 사용하는 방법이 가장 간단해서 해당 방법을 사용했어요.
conic-gradient()는 원뿔형으로 중심점을 기준으로 시계 방향으로 색을 칠해 나가는 방식이에요.

HTML

<div class="container">
  <div class="checker"></div>
  <div class="bar"></div>
</div>

CSS

* {
  box-sizing: border-box;
  
  margin: 0;
}

.container {
  position: relative;
  
  display: flex;
  justify-content: end;
  
  width: 100vw; 
  height: 100vh;

  background: #6255AA;

  border: 25px solid transparent;
}


.checker {
  width: 100px;
  height: 100%;

  background:
    /* 시계방향으로 색상을 4등분 */
    conic-gradient(
      #5DCBA3 0% 25%, /* 민트색 0~25% */
      transparent 25% 50%, /* 투명 25%~50% */
      #5DCBA3 50% 75%, /* 민트색 50%~75% */
      transparent 75% 100% /* 투명 75%~100% */
    );
    
  /* 체크 문양 크기 조절 */
  background-size: 100px 100px;
}

.bar {
  position: absolute;
  top: 100px;
  
  width: 100%;
  height: 50px;
  
  background: #5DCBA3;
}