Daily Targets (260325)
코드
<!-- p: 노란 타원, b 속성: 반원 아치 컨테이너 -->
<!-- i: 아치 안쪽 기둥(배경색으로 구멍 효과) -->
<p>
<p b>
<i></i>
<i></i>
<style>
&>* {
background: #7A60A1
}
/* 노란 타원형 상단 요소 */
p {
width: 90;
height: 70;
margin: 40 auto 0;
background: #F5DB78;
border-radius: 99q
}
/* 반원 아치 컨테이너, flex로 좌우 기둥 배치 */
[b] {
display: flex;
justify-content: space-between;
width: 280;
height: 140;
margin-top: 10;
border-radius: 999q 999q 0 0
}
/* 아치 안쪽 기둥, 배경색과 동일하여 구멍 효과 */
i {
width: 20;
height: 50;
margin: 90 40;
background: #7A60A1
}
</style>