Daily Targets (260320)
코드
<!-- p 태그 6개: 대각선 막대 2개(기본, t) + 반원 4개(u, u+l, u+r, u+d) -->
<p><p t><p u><p u l><p u r> <p u d>
<style>
/* 전체 화면을 그리드로 설정하고 자식 요소들을 중앙 배치 */
&>*{
display: grid;
place-items: center;
background: #352939
}
/* 기본 p: 얇고 긴 막대를 45도 회전 → X자의 \ 방향 */
p {
grid-area: 1 / 1;
width: 200px;
height: 10px;
background: #FADE8B;
transform: rotate(45deg)
}
/* X자의 / 방향 */
[t] {
transform: rotate(-45deg)
}
/* 반원 기본형: 아래쪽이 둥근 반원, 위로 이동 */
[u] {
width: 80;
height: 80;
border-radius: 0 0 99q 99q;
background: #A76DFF;
transform: translateY(-75px)
}
/* 오른쪽이 둥근 반원, 왼쪽으로 이동 */
[l] {
border-radius: 0 99q 99q 0;
transform: translateX(-75px)
}
/* 왼쪽이 둥근 반원, 오른쪽으로 이동 */
[r] {
border-radius: 99q 0 0 99q;
transform: translateX(75px)
}
/* 위쪽이 둥근 반원, 아래로 이동 */
[d] {
border-radius: 99q 99q 0 0;
transform: translateY(75px)
}
</style>