css实现箭头流程进度条

最新推荐文章于 2024-08-02 16:11:15 发布

bidepanm

最新推荐文章于 2024-08-02 16:11:15 发布

阅读量1.2k

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/bidepanm/article/details/126786490

版权

在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    .cssNav li{
    	position: relative;
        display: inline-block;
        padding: 0 20px;
        color: #fff;
        background: #50abe4;
        line-height: 40px;
    }
    .cssNav li:after{
        content: "";
        position: absolute;
        right: -20px;
        top: 0;
        z-index: 10;
        display: block;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid #50abe4;
    }
    .cssNav li:before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid #fff;
    }

    .cssNav li:first-child:before{
        display: none;
    }

    .cssNav li:last-child:after {
        display: none;
    }
    
    .cssNav li:hover {
        background-color: #ef72b6;
    }

    .cssNav li:hover:after {
        border-left-color: #ef72b6;
    }
</style>
</head>
<body>
<div class="box">
    <ul class="cssNav">
        <li>shouye</li>
        <li>haha</li>
        <li>heihei</li>
        <li>heihei</li>
    </ul>
</div>
<script>

</script>
</body>
</html>

https://blog.csdn.net/weixin_42512836/article/details/119367645?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-0-119367645-blog-78322711.pc_relevant_multi_platform_whitelistv5&spm=1001.2101.3001.4242.1&utm_relevant_index=3