Daily Targets (260223)
코드
<p><i></i></p><p s><i></i></p>
<style>
&>*{
background:#B6EBE7
}
i {
position: absolute;
top: 50%;
left: 50%;
/* 파란색 => 하늘색 => 파란색 줄무늬 패턴 원 표현 */
width: 60;
height: 60;
border:70px solid #B6EBE7;
border-radius: 50%;
background: #5370D9;
box-shadow: 0 0 0 100px #5370D9;
transform: translate(-50%, -50%)
}
p {
position: fixed;
top: -16;
left: -230;
flex-shrink: 0;
width: 500;
height: 500;
/* 원 1/4 부분 잘라냄 */
clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%)
}
[s] {
left: 130;
/* 뒤집어 좌우로 붙여서 최종 모양 표현 */
transform: scaleX(-1)
}
</style>