纯CSS 箭头流程,网上找的,留着备用
无意之中看到一个纯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 箭头流程,网上找的,留着备用的更多相关文章
- 纯CSS箭头,气泡
原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...
- css之纯css实现流程导航效果
:::tip 使用纯css线上 流程导航效果. 本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪 该方法IE下不支持 利用裁剪 clip ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- 【技能】使用纯CSS+html写出方向箭头,简单慷慨,好看
使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...
- 纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...
- 纯css实现网上商城左侧垂直商品分类菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯CSS实现tooltip提示框,CSS箭头及形状
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...
- 一个标签的72变,打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
随机推荐
- $(window).height()获取到的高度不对
关于这个问题,网上有人说这是webkit内核的浏览器导致的,且只有这种浏览器会出现,只需要将html5的声明整成标准的带有<!doctype>的声明的就行了,但是本人亲测仍然是不行的,所用 ...
- hdu 5929 Basic Data Structure
ゲート 分析: 这题看出来的地方就是这个是左结合的,不适用结合律,交换律. 所以想每次维护答案就不怎么可能了.比赛的时候一开始看成了异或,重读一遍题目了以后就一直去想了怎么维护答案...... 但是很 ...
- YY前端课程4
1. CSS和HTML一样,也是标记语言 2. CSS有三种样式:嵌入样式.内部样式(行内样式)和外部样式(外部样式表) 3. CSS的语法:选择器+{一个或多个样式} 4. 选择器是为了找到html ...
- yii2 的request get pos请求 基本用法示例
yii2好久没用了, 基本的都快忘了,赶紧记录一下. 1.普通的get和pst请求 $request = Yii::$app->request; $get = $request->get( ...
- 小游戏Step表
[Config]1|0|0|2|172,120,134|公主的记忆|1|2[Config] [Config]2|1|1|2|172,120,134|公主的记忆|1|2[Config] [Config] ...
- Linux中常用操作命令
常用指令 ls 显示文件或目录 -l 列出文件详细信息l(list) -a 列出当前目录下所有文件及目录,包括隐藏的a(all) mkdir ...
- js控制键盘只能输入数字和退格键,delete键
function numbText(e){ if(e&& e.stopPropagation){ code= e.which; }else{ code= window.event.ke ...
- PHP是什么
php 是一种服务器端的,嵌入html的脚本语言.php区别其他像客户端java的地方是它的代码在服务器端执行.php能做什么? 最低水平,php可以做任何其他cgi程序所能做的事,例如收集表格数据, ...
- linux环境下安装oracle数据库 原文在卡卡100http://www.cnblogs.com/kaka100
centos55_oracle11gr2_install 第一个阶段:安装centos55 a:安装centos5.5 用图形界面安装 硬盘 16G 注意:用图形界面安装.. 第二个阶段:配 ...
- 查询数据库表大小sql
SELECT a.name, b.rowsFROM sysobjects AS a INNER JOIN sysindexes AS b ON a.id = b.idWHERE (a.type = ' ...