Daily Targets (260322)
코드
<p c><p l><p c r>
<style>
&>* {
display: flex;
justify-content: center;
align-items: center;
background: #F3AC3C
}
[c] {
/* 원 형태 표현 */
width: 80;
height: 80;
margin-top: -94;
border: 30px solid #2D696F;
background: #FCF3F0;
/* 우측 하단 모서리 라운딩 제거 */
border-radius: 50% 50% 0 50%
}
[l] {
/* 선 표현 */
width: 100;
height: 30;
background: #2D696F
}
[r] {
margin-top: 126;
/* 좌측 상단 모서리 라운딩 제거 */
border-radius: 0 50% 50%
}
</style>