进度导航

最新推荐文章于 2024-01-18 14:25:57 发布

Cc_JoJo

最新推荐文章于 2024-01-18 14:25:57 发布

阅读量454

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/caohoucheng/article/details/75305519

版权

web前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

效果图
这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .li1{

            display:inline-block;
            position:relative;
            margin-right:5px;
            line-height:50px;
            height:50px;
            width:232px;
            background:#EBEBEB;
            text-align:center;
            margin-right: 5px;
        }
        /*对li前面进行修改*/
        .li1:before {
            position:absolute;
            left:0;
            top:0;
            height:0;
            width:0;
            border-bottom:25px inset transparent;
            border-left:25px solid #fff;
            border-top:25px inset transparent;
            content:""
        }
        /*对li后面进行修改*/
        .li1:after {
            position:absolute;
            right:-25px;
            top:0;
            height:0;
            width:0;
            border-bottom:25px inset transparent;
            border-left:25px solid #EBEBEB;
            border-top:25px inset transparent;
            content:"";
            z-index:2
        }
        /*选中状态*/
        .active{
            color:#fff;
            background:#FF6162;
        }
        .active:after {
            border-left-color:#FF6162
        }

        /*第一个li*/
        .li1:first-child:before{
            border: 0
        }
        /*最后一个li*/
        .li1:last-child:after{
            border: 0
        }
    </style>
</head>
<body>
    <ul>
        <li class="li1 active" style="z-index: 5;">开始</li>
        <li class="li1 " style="z-index: 4;">开始进行</li>
        <li class="li1 " style="z-index: 3;">进行中</li>
        <li class="li1 " style="z-index: 2;">结束进行</li>
        <li class="li1 " style="z-index: 1;">完成</li>
    </ul>

</body>
</html>

Cc_JoJo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
进度导航

效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .li1{ display:inline-block; position:relative;
复制链接

扫一扫