使用CSS渐变制作进度条

最新推荐文章于 2024-05-28 12:36:33 发布

一个爬坑的Coder

最新推荐文章于 2024-05-28 12:36:33 发布

阅读量563

点赞数 1

分类专栏： # CSS学习文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_39583550/article/details/127066456

版权

CSS学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果图:
请添加图片描述

HTML结构

<div class="container"> 
  <div class="inner"></div>
	<div class="percentage" style="height: 17%"></div>
</div>

CSS结构

body {
  background: #e4e4e4;
}
.container {
  width: 20px;
  height: 180px;
  position: relative;
}

.inner {
  width: 20px;
  height: 180px;
  background: linear-gradient(0deg, #2d4264 50%, #0a1431 50%);
  background-size: 100% 6px;
}
.percentage {
  position: absolute;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to bottom, #24a1d8 0%, #3e25c8 100%);
}

.percentage::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 180px;
  width: 20px;
  background: linear-gradient(0deg, transparent 50%, #0a1431 50%);
  background-size: 100% 6px;
}