Daily Targets (260110)
코드
<p w>
<i r>
<b></b>
<b s></b>
</i>
<i c>
<b></b>
<b s></b>
<b t></b>
<b f></b>
</i>
</p>
<style>
* {
margin: 0
}
&>*{
display: grid;
place-items: center;
background: #F4DA64
}
[w] {
position: relative;
width: 60;
height: 60;
background: #E25C57
}
i {
position: absolute;
inset: 0
}
[r] {
transform: rotate(45deg);
b {
position: absolute;
top: 50%;
left: 50%;
width: 20;
height: 240;
/* 빨간색 - 투명색 - 빨간색 줄무늬 패턴 */
background: linear-gradient(transparent 120px, #E25C57 0) 0 240px / 100% 180px;
transform: translate(-50%, -50%)
}
[s] {
transform: translate(-50%, -50%) rotate(90deg)
}
}
[c] {
b {
position: absolute;
top: -75;
left: 15;
width: 30;
height: 30;
background: #E25C57;
border-radius: 50%
}
[s] {
top: 105
}
[t],[f] {
top: 15;
left: -75
}
[f] {
left: 105
}
}
</style>