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

实际效果

源代码:

HTML:

<div class="wrapper">

   <ul class="flow-steps">

     <li><b class="f"></b><a href="#">步骤一</a><s></s></li>

      <li class="on"><b></b><a href="#">步骤二</a><s></s></li>

         <li><b></b><a href="#">步骤三</a><s></s></li>

         <li><b></b><a href="#">步骤四</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 箭头流程,网上找的,留着备用的更多相关文章

  1. 纯CSS箭头,气泡

    原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...

  2. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

  3. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  4. 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  5. 【技能】使用纯CSS+html写出方向箭头,简单慷慨,好看

    使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...

  6. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

  7. 纯css实现网上商城左侧垂直商品分类菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 纯CSS实现tooltip提示框,CSS箭头及形状

    本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...

  9. 一个标签的72变,打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

随机推荐

  1. 使用COALESCE时注意left join为null的情况

    1.使用COALESCE时,用到group by with cube,如果之前两个表left join时,有数据为null,就会使得查出的数据主键不唯一 例如: select COALESCE (c. ...

  2. python【6】-函数式编程

    一.高阶函数 map,reduce 1.map() 函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. def f(x): retur ...

  3. Sql Server Alter语句

    1:向表中添加字段 Alter table [表名] add [列名] 类型 2:  删除字段 Alter table [表名]  drop column [列名] 3:  修改表中字段类型 (可以修 ...

  4. 定时器springMVC

  5. PDF 补丁丁 0.5.0.2273 测试版发布:修复崩溃问题,可自定义工具栏文本

    新的测试版修复了编辑器在打开文件后再打开文件会崩溃的严重错误,以及一些小问题. 在一些小细节上作了调整,例如可自定义常用工具栏的文本等等. 由于之前测试版本的错误比较严重,推荐网友下载新的测试版.

  6. hello 漂亮的小靓仔

    <form type="text" name="超级" method="post"> <table align=" ...

  7. RP4412开发板在Android系统编译生成ramdisk-uboot.img

    荣品RP4412开发板在android系统编译的时候,怎么生成ramdisk-uboot.img生成流程分析: mkimage -A arm -O linux -T ramdisk -C none - ...

  8. 高手总结的“恋爱法”学习Linux系统,效果更好。

    如果你恋爱了,那你一定非常喜欢她.了解她,知道她喜欢吃什么玩什么,知道她需要什么,在她生气的时候可以哄她开心,一切尽在你的手指中.那你想学好Linux吗?喜欢Linux吗?你懂她吗?你有喜欢Linux ...

  9. [移动端]rem适配

    原理:给html根节点设置一个基础font-size值,然后页面的所有元素布局均相对于该font-size值采用rem单位设定.font-size的取值通过js计算. 但字体不用rem单位,原因如下: ...

  10. HDFS读写数据块--${dfs.data.dir}选择策略

    最近工作需要,看了HDFS读写数据块这部分.不过可能跟网上大部分帖子不一样,本文主要写了${dfs.data.dir}的选择策略,也就是block在DataNode上的放置策略.我主要是从我们工作需要 ...