CSS3实现步骤进度条效果
html:
<!-- div.mian+div.item*5 --> <div class="mian"> <div class="item">需求讨论</div> <div class="item">产品设计</div> <div class="item">开发制作</div> <div class="item">功能测试</div> <div class="item">竣工交付</div> </div>
CSS样式：
<title>CSS3实现步骤进度条效果</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
min-height: 100vh;
/* radial-gradient() 径向渐变 */
background-image: radial-gradient(#fff,#f1f1f1);
}
.mian{
width: 80%;
margin: 50px auto 0;
/* outline: 1px dashed yellow; */
overflow: hidden;
}
.mian .item{
width: 15%;
float: left;
height: 20px;
line-height: 20px;
background-color: coral;
margin-right: 10px;
text-align: center;
color: #fff;
font-size: 14px;
font-family: "微软雅黑";
/* 内边距 */
padding: 5px 0 5px 8px;
/* 相对定位 */
position: relative;
cursor: pointer;
}
/* 通过伪类::before绘制图形 */
.item::before{
content: '';
width: 0;
height: 0;
/* 通过边框让图形显示出来 */
border-style: solid;
/* 边框的方向设置顺序： 上边框 右边框 下边框 左边框 ‘上 右 下 左’ */
border-width: 15px 0 15px 10px;
background-color: transparent transparent transparent lightseagreen;
border-left-color: #fff;
/* 绝对定位 */
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.item::after{
/* 通过伪类::after绘制图形 */
content: '';
width: 0;
height: 0;
/* 通过边框让图形显示出来 */
border-style: solid;
/* 边框的方向设置顺序： 上边框 右边框 下边框 左边框 ‘上 右 下 左’ */
border-width: 15px 0 15px 10px;
border-color: transparent transparent transparent lightseagreen;
/* 绝对定位 */
position: absolute;
right: -10px;
top: 0;
z-index: 2;
}
/* 鼠标悬停 */
.main .itam:hover{
background-color: darkslateblue;
}
/* 伪类的叠加的写法----.item:hover::after */
.main .item:hover::after{
border-left-color: mediumslateblue;
}
</style>
预览效果：
