纯css立体条状柱形百分比

最新推荐文章于 2022-12-09 09:38:27 发布

你是我的绝笔

最新推荐文章于 2022-12-09 09:38:27 发布

阅读量543

点赞数

分类专栏： html 文章标签： css css3 html

本文链接：https://blog.csdn.net/w1242245/article/details/121288261

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>xxx</title>
</head>
<style type="text/css">

body {
	background-color: #030E30;
}

.sd-strip-percent {
	position: relative;
	width: 500px;
	margin:  200px auto;
}

.yuanzhu {
	position: relative;
    height: 14px;
    opacity: 0.8;
	background-image: linear-gradient(180deg, #FFD67D 6%, #FFA600 57%, #653902 100%);
    margin-right: 75px;
    z-index: 99;
}

.yuanzhu:before {
    position: absolute;
    content: "";
    display: block;
    margin-left: -5px;
    width: 9px;
    height: 14px;
    border-radius: 50%;
    background: #866100;
    z-index: 99;
}

.yuanzhu:after {
    position: absolute;
    right: -5px;
    top: 0px;
    content: "";
    display: block;
    width: 9px;
    height: 14px;
    border-radius: 50%;
    background-image: linear-gradient(180deg, #FFDF96 0%, #F5AD07 100%);
    z-index: 99;
}

.percent { 
	position: relative; 
	height: 14px; 
	width: 30%;
	background: #163f7a;
	z-index: 999
}

.percent:before {
	position: absolute; 
	left:-5px; 
	content: ""; 
	display: block; 
	width: 9px; 
	height: 14px; 
	border-radius:50%;
	background: #103165;
	z-index: 999
}

.percent:after {
	position: absolute; 
	right:-5px; 
	content: ""; 
	display: block; 
	width: 9px; 
	height: 14px; 
	border-radius:50%; 
	background: #866100; // #103165
	z-index: 999
}

.pc-values {
	position: absolute;
	top: -5px;
	right: 0;
	width: 60px;
	/*text-align: center;*/
}

.pc-value1 {
	font-size: 14px;
	color: #42CBFF;
	font-weight: 700;
}

.syb-split {
	font-size: 14px;
	color: #C0E3FF;
	line-height: 17px;
	font-weight: 700;
}

.pc-value2 {
	font-size: 14px;
	color: #FFB200;
	line-height: 17px;
	font-weight: 700;
}

</style>
<body>
	<div class="sd-strip-percent">
		<div class="yuanzhu">
			<div class="percent"></div>
		</div>
		<div class="pc-values">
			<span class="pc-value1">30</span>
			<span class="syb-split">/</span>
			<span class="pc-value2">40</span>
		</div>
	</div>
</body>
</html>