CSSBattle May 3, 2025

문제

풀이

원 모양의 패턴은 radial-gradient로 쉽게 완성이 되는거 같아요.
이번 과제는 radial-gradient 두 개를 사용해서 쉽게 완성했어요.

속이 찬 원은 중앙으로 부터130px까지만 노란색으로 보이도록 했어요.
노란 링 모양은 원 중앙에서 부터 0px에서 80px까지 청록색, 80px부터 130px까지는 노란색, 130px 바깥으로 다시 청록색이 되게 했어요.

HTML

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

CSS

  * {
    box-sizing: border-box;

    margin: 0;
  }
  
  .container {
    width: 100vw;
    height: 100vh;
    
    /* radial-gradient(circle, [색상1 거리1], [색상2 거리2], [색상3 거리3]) */
    background:
      radial-gradient(circle, #F4DA64 130px, transparent 0px) 200px 0px,
      radial-gradient(circle, #5C8D8F 80px, #F4DA64 0 130px, #5C8D8F 0) 0 150px,
      #5C8D8F;
  }