CSSBattle

Daily Targets (260523)

코드
<p><p s><hr><hr t>
<style>
  &>* {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #3157B4
  }

  p {
    width: 120;
    height: 120;
    margin: -108 -10 0 0;
    /* linear-gradient 이용해 사각형 내 작은 사각형 표현 */
    background:
      linear-gradient(#060F55) 100% 100% / 40px 36px no-repeat
    #84BE8D
  }

  [s] {
    margin: 108 0 0 -10;
    scale: -1 -1
  }

  hr {
    /* 파란색 라인 */
    position: fixed;
    top: 148px;
    left: 0;
    z-index: -1;
    width: 50%;
    height: 16;
    background: #060F55;
    border: 0
  }

  [t] {
    top: 120;
    left: 50%
  }
</style>