LEE.SOL

Daily Targets (260109)

<div w>
  <p d></p>
  <p u></p>
</div>
<style>
  &>*{
    background: #F2EAA8;
    margin: 0
  }
  [w] {
    margin: 0;
    width: 50%;
    /* 요소를 오른쪽 방향으로 그대로 반사(복제) */
    -webkit-box-reflect: right
  }
  [d],[u] {
    --color: #EE7667;
    margin: 40 35;
    width: 90;
    height: 50;
    /* 'ㅜ' 모양의 상단 '-' 부분을 border-top으로 표현. 보더 색상을 --color 변수로 지정 */
    border-top: 40px solid var(--color);
    /* 'ㅜ' 모양 하단의 '|'을 가로 방향 linear-gradient로 표현
       25px 노란색 - 빨간색(--color 값) 구간을 만든 뒤
       background-size를 65px로 지정해 반복되는 줄무늬 패턴 생성 */
    background: linear-gradient(90deg, #F2EAA8 25px, var(--color) 0) 0 / 65px
  }
  [u] {
    transform: rotate(180deg);
    /* 'ㅗ' 모양의 푸른색 색상 설정 */
    --color: #84BE8D
  }
</style>