css如何实现流程导航效果？有哪几种方法？

互联网 20-3-7

方法一：利用裁剪（该方法IE下不支持）

利用裁剪 clip-path: polygon（），直接画出一个三角唯一一点需要算出大致百分比就可以画出来

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <meta name="viewport" content="width=device-width">         <style>             .nav-box {                 display: flex;                 list-style: none;                 font-size: 14px;             }             .nav-box li {                 white-space: nowrap;                 color: #019fe9;                 background: #edf9ff;                 counter-increment: listCounter;                 clip-path: polygon(87% 0, 100% 50%, 87% 100%, 0 100%, 13% 50%, 0 0);                 line-height: 40px;                 padding: 0 25px;                 margin-right: -10px;             }             .nav-box li::before {                 content: counter(listCounter) "-";             }             .nav-box .active {                 color: #fcfefe;                 background: #009fe9;             }             .nav-box .active ~ li {                 color: #8e8e8e;                 background: #ebedf0;             }         </style>     </head>     <body>         <!-- 容器 -->         <ol class="nav-box">             <li><a href="">规则说明</a></li>             <li><a href="">参与活动</a></li>             <li class="active" aria-current="true"><a href="">参与抽奖</a></li>             <li><a href="">奖品发放</a></li>             <li><a href="">查看结果</a></li>         </ol>     </body> </html>

（相关教程推荐：CSS入门教程）

方法二：利用错位

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <meta name="viewport" content="width=device-width">        <style scoped>             .nav-box {                 display: flex;                 list-style: none;                 font-size: 14px;             }             .nav-box li {                 white-space: nowrap;                 color: #019fe9;                 padding: 0 15px 0 25px;                 line-height: 40px;                 margin-left: 3px;                 position: relative;                 z-index: 99;             }             .nav-box li:first-child{                 background: #edf9ff;                 margin-right: 7px;             }             .nav-box .active:first-child{                 background: #019fe9;             }             .nav-box li:first-child::before,             .nav-box li:first-child::after{                 left: 7px;             }             .nav-box li::before,             .nav-box li::after {                 content: "";                 position: absolute;                 left: 0;                 height: 50%;                 width: 100%;                 background: #edf9ff;                 z-index: -1;             }             .nav-box li::before {                 top: 0;                 transform: skew(30deg);             }             .nav-box li::after {                 bottom: 0;                 transform: skew(-30deg);             }             .nav-box .active {                 color: #d7effb;             }             .nav-box .active::before,             .nav-box .active::after {                 background: #009fe9;             }             .active ~ li {                 color: #909091;             }             .active ~ li::before,             .active ~ li::after {                 background: #ebedf0;             }         </style>     </head>     <body>         <!-- 容器 -->         <ol class="nav-box">             <li class="active">1-规则说明</li>             <li>2-参与活动</li>             <li>3-参与抽奖</li>             <li>4-奖品发放</li>             <li>5-参与结果</li>         </ol>     </body> </html>

方法三：border造三角

利用 border 生成前后三角

缺点是索引需要自己定义，不加标签情况下无法使用css计数器

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width">   <style>     .nav-box{         height:40px;         line-height:40px;         list-style: none;         padding:0;         display:flex;         font-size:14px;         overflow: hidden;     }     .nav-box li{         padding:0 10px 0 10px;         margin-right: 18px;         white-space: nowrap;         position:relative;         color:#019fe9;         background:#edf9ff ;     }     /* 三角 */     .nav-box li:before,.nav-box li:after{         content:'';         position:absolute;         width: 0;         height: 0;     }     .nav-box li:before{         right: -16px;         border: solid transparent;         border-width: 20px 0 20px 16px;         border-left-color:#edf9ff;         z-index:2;     }     /* 白线 */     .nav-box li:after{         top: -3px;         left: -18px;         border: solid #edf9ff;         border-width: 23px 0 23px 18px;         border-left-color: transparent;         z-index: 1;     }     .nav-box .active{         color: #fff;         background:#009fe9;     }     .nav-box .active ~ li{         color:#8e8e8e;         background:#ebedf0;     }     .nav-box .active:before{         border-left-color:#009fe9;     }     .nav-box .active:after{         border-color: #009fe9;         border-left-color: transparent;     }     .nav-box .active ~ li:before{         border-left-color:#ebedf0;     }      .nav-box .active ~ li:after{         border-color: #ebedf0;         border-left-color: transparent;     }   </style> </head> <body>     <ol class="nav-box">         <li>1-规则说明</li>         <li>2-参与活动</li>         <li class="active">3-参与抽奖</li>         <li>4-奖品发放</li>         <li>5-参与结果</li>     </ol> </body> </html>

更多编程相关教程，请关注php中文网编程入门栏目！

以上就是css如何实现流程导航效果？有哪几种方法？的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：流程导航效果