LEE.SOL

Daily Targets (260624)

<style>
  * {
    --t: 190;
    --c: 330px;

    /* 사각형 테두리 */
    position: relative;
    background: #394257;
    margin: 40 50;
    border: 30px solid #FAE29E;

    &::before, &::after {
      /* 꼭짓점에 붙은 사각형 표현 */
      position: absolute;
      top: -70;
      left: -60;
      right: -60;
      height: 40;
      background: linear-gradient(90deg, #FAE29E 30px, #394257 0) 0 / var(--c);
      content: ''
    }

    &::after {
      top: var(--t)
    }

    * {
      /* body 요소의 꼭짓점에 붙은 사각형 위치 조절 */
      --t: 50;
      --c: 170px
    }
  }
</style>