HTML
<div class="lui-column-bg">
<div class="percent">23%
</div>
</div>
scss代码
$zhu_w_f: linear-gradient(to left, #a9a9a9, #fcfcfc);
.zhu_bot {
width: 100%;
background: $zhu_w_f;
}
.a_b {
content: "";
position: absolute;
width: 100%;
border-radius: 50%;
z-index: 1;
}
.lui-column-bg {
position: relative;
width: 50px;
height: 40px;
margin: 100px auto;
background: $zhu_w_f;
&::before {
@extend .a_b;
height: 20px;
top: -8px;
background-color: #a7a7a7;
}
&::after {
@extend .a_b;
height: 20px;
bottom: -8px;
border-radius: 0 0 50% 50%;
background: $zhu_w_f;
}
.percent{
position: absolute;
top: -40px;
color: #a7a7a7;
left: 50%;
transform: translateX(-45%) scale(0.8);
font-size: 20px;
text-align: center;
}
}
效果
image.png
