1、效果圖
2、代碼
<body>
<div class="contain">
<div class="reline">
<div class="line">
<ul class="flex-row top-line">
<li>
<div></div>
<div>0</div>
<div></div>
<div class="focus-sign">V1</div>
</li>
<li>
<div></div>
<div>300</div>
<div class="focus-line"></div>
<div class="focus-sign">V2</div>
</li>
<li>
<div></div>
<div>1500</div>
<div></div>
<div>V3</div>
</li>
<li>
<div></div>
<div>3500</div>
<div></div>
<div>V4</div>
</li>
<li>
<div></div>
<div>6000</div>
<div></div>
<div>V5</div>
</li>
<li>
<div></div>
<div>10800</div>
<div></div>
<div>V6</div>
</li>
<li>
<div></div>
<div>25600</div>
<div></div>
<div>V7</div>
</li>
</ul>
<div class="bline"></div>
</div>
</div>
</div>
</body>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
width: 100%;
height: 100%;
font-size: 40px;
}
.contain {
width: 750px;
background-color: black;
margin: 0 auto;
height: 100%;
}
.reline{
width: 686px;
height: 100%;
margin: 0 auto;
background-image: linear-gradient(-128deg, #836AFF 10%, #BA6AFF 100%);
}
.line {
position: relative;
margin: 0 auto;
height: 8rem;
padding-top: 4rem;
background-image: linear-gradient(-128deg, #836AFF 10%, #BA6AFF 100%);
}
.flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.top-line li {
width: 0.75rem;
height: 8rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.top-line li div:nth-child(1) {
width: 1.5rem;
height: 1.5rem;
background-color: antiquewhite;
border-radius: 50%;
margin: 0.25rem 0;
}
.top-line li div:nth-child(2) {
font-family: PingFangSC-Semibold;
font-size: 0.5rem;
color: #ffffff;
line-height: 0.6rem;
letter-spacing: 0;
margin-bottom: 0.25rem;
}
.top-line li div:nth-child(3) {
width: 0.2rem;
height: 0;
background: rgba(255, 255, 255, 0.3);
margin-bottom: 0.25rem;
}
.top-line li div:nth-child(4) {
width: 0.75rem;
height: 0.45rem;
background: rgba(255, 255, 255, 0.3);
margin-bottom: 0.25rem;
border-radius: 0.1rem;
font-size: 0.3rem;
background: #C2A2FB;
font-family: AppleSystemUIFont;
color: #FFFFFF;
text-align: center;
z-index: 10;
margin: 0px;
}
.focus-line {
background: #FDE23D !important;
}
.focus-sign {
background: #FDE23D !important;
color: #442509 !important;
}
.top-line li:nth-child(1) div:nth-child(3) {
height: 0;
margin-bottom: 0;
}
.top-line li:nth-child(2) div:nth-child(3) {
height: 0.75rem;
}
.top-line li:nth-child(3) div:nth-child(3) {
height: 1.5rem;
}
.top-line li:nth-child(4) div:nth-child(3) {
height: 2.25rem;
}
.top-line li:nth-child(5) div:nth-child(3) {
height: 3rem;
}
.top-line li:nth-child(6) div:nth-child(3) {
height: 3.75rem;
}
.top-line li:nth-child(7) div:nth-child(3) {
height: 4.5rem;
}
.line .bline {
width: 100%;
height: 0.1rem;
background: rgba(255, 255, 255, 0.3);
position: absolute;
bottom: 0.2rem;
z-index: 9;
}
</style>
3、數值之間可以添加連接線，使用transform: rotate();