CSSBattle

Daily Targets (260424)

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

  p {
    display: grid;
    place-items: center;
    width: 200;
    height: 200;
    border-radius: 50%;
    /* conic-gradient를 이용하여 90도씩 부채꼴 모양 생성 */
    background: conic-gradient(
      #fff 0 90deg,
      #f7cb71 90deg 180deg,
      #fff 180deg 270deg,
      #f7cb71 270deg 360deg
    )
  }

  i {
    width: 120;
    height: 120;
    border-radius: 50%;
    background: conic-gradient(
      #fff 0 90deg,
      #111 90deg 180deg,
      #fff 180deg 270deg,
      #111 270deg 360deg
    )
  }
</style>