CSSBattle

Daily Targets (260305)

코드
<p><p b><p b s>
<style>
  &>*{
    background:#983C50
  }
  
  /* 모든 p: 화면 중앙 고정, 검은 원 표현 */
  p {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180;
    height: 180;
    box-sizing: border-box;
    margin: 0;
    background: #000;
    border-radius: 50%
  }

  /* b 속성 가진 p: 더 큰 원, 흰색 테두리
     clip-path로 아래쪽 반원만 표시 → 반원 테두리 효과 */
  [b] {
    width: 240;
    height: 240;
    border: solid #fff;
    border-width: 0 30 30;
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%)
  }

  /* s 속성 가진 p: 가장 작은 원 */
  [s] {
    width: 140;
    height: 140;
  }
</style>