CSSBattle

Daily Targets (260223)

코드
<p><i></i></p><p s><i></i></p>
<style>
  &>*{
    background:#B6EBE7
  }

  i {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 파란색 => 하늘색 => 파란색 줄무늬 패턴 원 표현 */
    width: 60;
    height: 60;
    border:70px solid #B6EBE7;
    border-radius: 50%;
    background: #5370D9;
    box-shadow: 0 0 0 100px #5370D9;
    transform: translate(-50%, -50%)
  }

  p {
    position: fixed;
    top: -16;
    left: -230;
    flex-shrink: 0;
    width: 500;
    height: 500;
    /* 원 1/4 부분 잘라냄 */
    clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%)
  }

  [s] {
    left: 130;
    /* 뒤집어 좌우로 붙여서 최종 모양 표현 */
    transform: scaleX(-1)
  }
</style>