CSSBattle

Daily Targets (260220)

코드
<style>
<p></p><p r></p><b></b><b s></b>
<style>
  &>*{
    background:#2F434E
  }

  p {
    position: fixed;
    top: 74;
    left: 80;
    /* 평행사변형 표현 */
    width: 160;
    height: 120;
    background: #6AC09E;
    transform: skew(0, 37deg)
  }

  [r] {
    /* p 요소를 뒤집음. 겹쳐서 리본 모양(▶◀) 표현 */
    transform: skew(0, -37deg)
  }

  b {
    position: fixed;
    top: 50%;
    left: 80;
    /* 리본 중앙에 뚫린 삼각형(◁) 표현 */
    border-right: 80px solid #2F434E;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    transform: translateY(-50%)
  }

  [s] {
    /* 리본 우측 삼각형(▶) 표현 */
    left: 240;
    border-right: 0;
    border-left: 80px solid #6AC09E
  }
</style>