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>