首页 > 代码库 > 纯CSS 箭头流程，网上找的，留着备用

纯CSS 箭头流程，网上找的，留着备用

2024-08-03 19:21:08   226人阅读

 无意之中看到一个纯CSS做的箭头导航（流程式），收藏一下，以备不时之需

 实际效果

                                                     

<style></style>
  • 步骤一
  • 步骤二
  • 步骤三
  • 步骤四

 

 源代码：

   HTML:

    <div class="wrapper">

　　 <ul class="flow-steps">

　　　　 <li><b class="f"></b><a href="http://www.mamicode.com/#">步骤一</a><s></s></li>

　　　　  <li class="on"><b></b><a href="http://www.mamicode.com/#">步骤二</a><s></s></li>

         <li><b></b><a href="http://www.mamicode.com/#">步骤三</a><s></s></li>

         <li><b></b><a href="http://www.mamicode.com/#">步骤四</a><s></s></li>

    </ul>

</div>

  CSS:

    .wrapper{ padding:20px;}

    .flow-steps{ position:relative; height:30px; list-style:none; font-size:14px; overflow:hidden;}

    .flow-steps li{ float:left; height:30px; margin-right:-32px; background:#d7d7d7; line-height:30px; overflow:hidden;}

  .flow-steps a{ display:block; float:left; width:80px; padding: 0 18px 0 0; text-align:center; color:#333; text-decoration:none;}

  .flow-steps b{ float:left; width:0px; height:0px; margin-top:-6px; border:21px solid #d7d7d7; border-left-color:#fff; font-size:0; line-height:0; z-index:9;}

  .flow-steps s{ position:relative; float:left; width:0px; height:0px; margin-top:-2px; border:17px solid transparent; /*For IE6*/ _border-color:snow; _filter:chroma(color=snow);/*For IE6*/ border-left-color:#d7d7d7; font-size:0; line-height:0; z-index:99;}

  .flow-steps .on{ background:#ff6600;}

  .flow-steps .on a{ color:#fff;}

  .flow-steps .on b{ border-color:#ff6600; border-left-color:#fff; }

  .flow-steps .on s{ border-left-color:#ff6600;}

  .flow-steps .f{ border-color:#d7d7d7!important;}

   

 

纯CSS 箭头流程，网上找的，留着备用


联系
我们