CSSBattle Apr 29, 2025

문제

풀이

HTML

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

CSS

radial-gradient를 사용해서 하얀 원을 구현해 봤어요.
중심에서 반지름 30px까지는 흰색, 30px을 넘어가면 바로 투명으로 바뀌게 했어요.
원의 높이는 0, 좌우 위치는 각각 80px, -80px로 대칭을 이루게 했어요.

* {
  box-sizing: border-box;

  margin: 0;
}

.container {
  position: relative;
  
  width: 100vw;
  height: 100vh;
  
  background: #F7EC7D;
}

.pill {
  position: absolute;
  top: 50%;
  left: 50%;
  
  width: 120px;
  height: 280px;

  border-radius: 60px;
  
  background: #243D83;    

  transform:translate(-50%, -50%);
}

.rotate {
  background: 
    radial-gradient(circle, #FFFFFF 30px, transparent 0px) 0 80px,
    radial-gradient(circle, #FFFFFF 30px, transparent 0px) 0 -80px,
    #243D83;

  transform: translate(-50%, -50%) rotate(90deg);
}