CSSBattle

Daily Targets (260320)

코드
<!-- p 태그 6개: 대각선 막대 2개(기본, t) + 반원 4개(u, u+l, u+r, u+d) -->
<p><p t><p u><p u l><p u r> <p u d>
<style>
  /* 전체 화면을 그리드로 설정하고 자식 요소들을 중앙 배치 */
  &>*{
    display: grid;
    place-items: center;
    background: #352939
  }
  /* 기본 p: 얇고 긴 막대를 45도 회전 → X자의 \ 방향 */
  p {
    grid-area: 1 / 1;
    width: 200px;
    height: 10px;
    background: #FADE8B;
    transform: rotate(45deg)
  }

  /* X자의 / 방향 */
  [t] {
    transform: rotate(-45deg)
  }

  /* 반원 기본형: 아래쪽이 둥근 반원, 위로 이동 */
  [u] {
    width: 80;
    height: 80;
    border-radius: 0 0 99q 99q;
    background: #A76DFF;
    transform: translateY(-75px)
  }
  
  /* 오른쪽이 둥근 반원, 왼쪽으로 이동 */
  [l] {
    border-radius: 0 99q 99q 0;
    transform: translateX(-75px)
  }

  /* 왼쪽이 둥근 반원, 오른쪽으로 이동 */
  [r] {
    border-radius: 99q 0 0 99q;
    transform: translateX(75px)
  }

  /* 위쪽이 둥근 반원, 아래로 이동 */
  [d] {
    border-radius: 99q 99q 0 0;
    transform: translateY(75px)
  }
</style>