Daily Targets (260128)
코드
<i>
<p l></p>
<p t></p>
<p b></p>
</i>
<style>
&>*{
display: flex;
background:#B6EBE7
}
*{
margin: 0
}
i {
position: relative;
margin-top: 130px;
width: 50%;
-webkit-box-reflect: right
}
[l] {
position: absolute;
left: 10;
bottom: 0;
/* 직사각형 표현 */
width: 30;
height: 120;
background: #5E2BB7
}
[t], [b] {
position: absolute;
top: 0;
left: 10;
/* 반 도넛 모양 표현 */
border: solid #9382E4;
border-width: 30;
width: 40;
height: 40;
border-radius: 50%;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%)
}
[b] {
left: 80;
border-color: #5E2BB7;
transform: scaleY(-1)
}
</style>