CSSBattle

Daily Targets (260222)

코드
<p><p s>
<style>
  &{
    background:#B5BD49
  }

  p {
    position: fixed;
    top: 50%;
    left: 50%;
    /* 호(원 1/4) 모양 표현 */
    width: 200;
    height: 200;
    margin: 100 0 0 -100;
    border: 100px solid #11092D;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%)
  }

  [s] {
    /* 호 모양 뒤집어 겹쳐 최종 모양 완성  */
    margin: 100 0 0 100;
    clip-path: polygon(50% 0, 0 0, 0 50%, 50% 50%)
  }
</style>