CSSBattle

Daily Targets (260417)

코드
<p b><p>
<style>
  &>* {
    display: grid;
    place-items: center;
    background: #3F4869
  }

  p {
    /* 중앙 원 표현 */
    z-index: 1;
    grid-area: 1/1;
    width: 100;
    height: 100;
    background: #B5BD49;
    border-radius: 50%
  }

  [b] {
    width: 230;
    height: 230;
    /* 사각형 내 원 표현 */
    background: radial-gradient(#3F4869 95px, #B5BD49 0);
    /* 일부를 잘라줌 */
    clip-path: polygon(0 0, 135px 0, 135px 126px, 0 126px);
    border-radius: 0
  }
</style>