Daily Targets (260210)
코드
<p>
<i></i>
<i s></i>
<i t></i>
<i f></i>
</p>
<style>
&>*{
display: grid;
place-items:center;
background:#F6E49C
}
p{
position: relative;
width: 220;
height: 80;
background: #2F5C24
}
i {
position: absolute;
top: 0;
left: 0;
/* 잎 모양 표현 */
width: 80;
height: 80;
background: inherit;
border-radius: 0 100px;
transform: translate(-100%, -100%)
}
[s] {
/* 상하 뒤집기 */
scale: 1 -1
}
[t],[f] {
left: auto;
right: 0;
/* 좌우 뒤집기 */
scale: -1 1
}
[f] {
/* 좌우 상하 뒤집기 */
scale: -1
}
</style>