CSSBattle

Daily Targets (260204)

코드
<p><p l t><p r t><p l b><p r b>
<style>
  &>*{
    /* 중앙 선 표현 */
    background:linear-gradient(#FFF) 50% / 20px no-repeat #AC778B
  }

  p {
    position:fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* 사각형 표현 */
    width: 60px;
    height: 60px;
    margin: 0;
    border: 20px solid #fff;
    border-radius: 30px;
    background: #AC778B
  }

  /* 속성에 따라 위치 조절 */
  [t] {
    margin-top: -80
  }
  [b] {
    margin-top: 80
  }
  [l] {
    margin-left: -200
  }
  [r] {
    margin-left: 200
  }
</style>