CSSBattle

Daily Targets (260617)

코드
<w>
  <p></p>
  <p s></p>
</w>
<r></r>
<r b></r>
<r l></r>
<r r></r>
<style>
  & {
    background: #E8AD6D
  }

  w {
    /* 원 테두리 */
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 180;
    height: 180;
    margin: 40 auto;
    border: 20px solid #A84A4B;
    border-radius: 50%
  }

  p {
    /* 가로 직사각형 */
    grid-area: 1 / 1;
    width: 100%;
    height: 30;
    background: #fff
  }

  [s] {
    /* 세로 직사각형 */
    rotate: 90deg
  }

  r {
    /* 원 테두리의 상하좌우에 붙어있는 사각형 */
    position: fixed;
    top: 20;
    left: 185;
    width: 30;
    height: 30;
    background: #A84A4B
  }

  [b] {
    top: 250
  }

  [l], [r] {
    top: 135;
    left: 70
  }

  [r] {
    left: 300
  }
</style>