Daily Targets (260222)
코드
<p><p s>
<style>
&{
background:#B5BD49
}
p {
position: fixed;
top: 50%;
left: 50%;
/* 호(원 1/4) 모양 표현 */
width: 200;
height: 200;
margin: 100 0 0 -100;
border: 100px solid #11092D;
border-radius: 50%;
transform: translate(-50%, -50%);
clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%)
}
[s] {
/* 호 모양 뒤집어 겹쳐 최종 모양 완성 */
margin: 100 0 0 100;
clip-path: polygon(50% 0, 0 0, 0 50%, 50% 50%)
}
</style>