<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css实现带箭头的流程条</title>
<style>
.navs {
height: 100px;
}
.navs li {
padding: 0px 10px 0 30px;
line-height: 40px;
background: #50abe4;
display: inline-block;
color: #fff;
position: relative;
}
.navs li:after {
content: '';
display: block;
border-top: 20px solid #50abe4;
border-bottom: 20px solid #50abe4;
border-left: 20px solid #fff;
position: absolute;
right: -20px;
top: 0;
}
.navs li:after {
content: '';
display: block;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #50abe4;
position: absolute;
right: -20px;
top: 0;
z-index: 10;
}
.navs li:before {
content: '';
display: block;
border-top: 20px solid #50abe4;
border-bottom: 20px solid #50abe4;
border-left: 20px solid #fff;
position: absolute;
left: 0px;
top: 0;
}
.navs li:first-child {
border-radius: 4px 0 0 4px;
padding-left: 25px;
}
.navs li:last-child,
.cssNavEnd {
border-radius: 0px 4px 4px 0px;
padding-right: 25px;
}
.navs li:first-child:before {
display: none;
}
.navs li:last-child:after,
.cssNavEnd:after {
display: none;
}
.navs li.active {
background-color: #ef72b6;
}
.navs li.active:after {
border-left-color: #ef72b6;
}
</style>
</head>
<body>
<ul class="navs">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
</script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「xiaoquanbiji」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43102934/article/details/102135019
网友评论