无意之中看到一个纯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. $(window).height()获取到的高度不对

    关于这个问题,网上有人说这是webkit内核的浏览器导致的,且只有这种浏览器会出现,只需要将html5的声明整成标准的带有<!doctype>的声明的就行了,但是本人亲测仍然是不行的,所用 ...

  2. hdu 5929 Basic Data Structure

    ゲート 分析: 这题看出来的地方就是这个是左结合的,不适用结合律,交换律. 所以想每次维护答案就不怎么可能了.比赛的时候一开始看成了异或,重读一遍题目了以后就一直去想了怎么维护答案...... 但是很 ...

  3. YY前端课程4

    1. CSS和HTML一样,也是标记语言 2. CSS有三种样式:嵌入样式.内部样式(行内样式)和外部样式(外部样式表) 3. CSS的语法:选择器+{一个或多个样式} 4. 选择器是为了找到html ...

  4. yii2 的request get pos请求 基本用法示例

    yii2好久没用了, 基本的都快忘了,赶紧记录一下. 1.普通的get和pst请求 $request = Yii::$app->request; $get = $request->get( ...

  5. 小游戏Step表

    [Config]1|0|0|2|172,120,134|公主的记忆|1|2[Config] [Config]2|1|1|2|172,120,134|公主的记忆|1|2[Config] [Config] ...

  6. Linux中常用操作命令

    常用指令 ls        显示文件或目录 -l           列出文件详细信息l(list) -a          列出当前目录下所有文件及目录,包括隐藏的a(all) mkdir     ...

  7. js控制键盘只能输入数字和退格键,delete键

    function numbText(e){ if(e&& e.stopPropagation){ code= e.which; }else{ code= window.event.ke ...

  8. PHP是什么

    php 是一种服务器端的,嵌入html的脚本语言.php区别其他像客户端java的地方是它的代码在服务器端执行.php能做什么? 最低水平,php可以做任何其他cgi程序所能做的事,例如收集表格数据, ...

  9. linux环境下安装oracle数据库 原文在卡卡100http://www.cnblogs.com/kaka100

    centos55_oracle11gr2_install   第一个阶段:安装centos55 a:安装centos5.5   用图形界面安装  硬盘 16G 注意:用图形界面安装.. 第二个阶段:配 ...

  10. 查询数据库表大小sql

    SELECT a.name, b.rowsFROM sysobjects AS a INNER JOIN sysindexes AS b ON a.id = b.idWHERE (a.type = ' ...