CSSBattle May 6, 2025

문제

풀이

<div></div>

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

div {
  width: 100vw;
  height: 100vh;
  
  background: 
  	/* 가운데 원 */
    radial-gradient(circle at center 232px, #4A9A86 40px, transparent 0px),
    /* 중간 크기의 원 2개 */
    radial-gradient(circle at 118px 232px, #4A9A86 30px, transparent 0px) 0 0/ 164px,
    /* 작은 크기의 원 3개지만, 하나는 가운데 원에 가려짐 */
    radial-gradient(circle at 56px 232px, #4A9A86 20px, transparent 0px) 0 0/ 144px,
    linear-gradient(#EBF6F0 232px, #4E4B44 0px);
}