Daily Targets (260304)
코드
<b>
<p></p>
<p c></p>
<p></p>
</b>
<b s>
<i></i>
<i t></i>
</b>
<style>
&>*{
margin-top: 24;
background:#3C8B98
}
b {
display: flex;
justify-content: center;
gap: 10px
}
p {
/* 직사각형 표현 */
width: 50;
height: 80;
background: #fff
}
[s] {
margin-top: -6;
}
[c] {
/* 가운데 직사각형만 초록색으로 변경 */
background: #BFFFAE
}
i {
width: 70;
height: 80;
/* 좌우 음수 margin으로 겹쳐서 연결된 모양 구현 */
margin: 0 -30;
/* 보더로 U자 형태 생성 */
border: solid #BFFFAE;
border-width: 0 50 50 50
}
</style>