三角形变形记之纯css实现的分布导航条效果

三角形变形记，用纯css实现的分布导航条效果

<style type="text/css">

ul,li { list-style-type:none; font-size:13px; font-weight:bold; }

li { float:left; position:relative; line-height:30px; background:#9BBB38; color:#fff; width:100px; height:30px;   text-align:center; padding-right:10px;  }

.arrow { width:0px; height:0px; font-size:0px; line-height:0px; }

s {  border:15px solid #9BBB38; border-left-color:transparent; position:absolute; left:-15px; top:0px; }

g { border:15px solid #fff; border-left-color:#9BBB38;  position:absolute; right:-12px; top:0px; }

li.on { background:#E58712; }

li.on s{ border:15px solid #E58712; border-left-color:transparent;}

li.on g {  border-left-color:#E58712; }

li.first s{ border-left-color:#9BBB38;  }

li.last g {  border:15px solid #9BBB38; right:0px;  }

</style>

</head>

<body>

<ul>

         <li class="first"><s></s>注册<g></g></li>

         <li class="on"><s></s>登录<g></g></li>

         <li><s></s>下单<g></g></li>

         <li class="last"><s></s>付款<g></g></li>

</ul>

</body>

一、border边框变形记：

如果你要问这些是如何实现的呢？其实比较简单，只是平时大家很少关注罢了。我们习惯了用border定义边框，因为设计图的原因，大多是定义“1-5”像素的图形，并没有进行过深入的研究，比如border-left与border-top之间的衔接是怎样的呢？想要知道答案很简单，我们只需要将border-width的值增大就可以了，增大后我们会看到border之间的衔接是一条斜线。如上图所示了，下面贴上面部分的代码：

<div style="width: 20px; height: 20px; display: inline-block; border: 40px solid #0f0;  float: left;"></div>

<div style="width: 20px; height: 20px; display: inline-block; margin-left: 20px; border-left: 40px solid #f00; border-top: 40px solid #0f0; border-right: 40px solid #03f; border-bottom: 40px solid #f70;  float: left;"></div>

<div style="width: 0px; height: 0px; display: inline-block; margin-left: 20px; border-left: 40px solid #f00; border-top: 40px solid #0f0; border-right: 40px solid #03f; border-bottom: 40px solid #f70; font-size: 0; float: left;"></div>

<div style="width: 0px; height: 0px; display: inline-block; margin-left: 20px; border-left: 40px solid #f00; border-top: 40px solid #0f0; border-right: 80px solid #03f; border-bottom: 40px solid #f70; font-size: 0; float: left;"></div>

你一定很想了解上面的图形的变形原理了。这里我分步骤解析代码：

首先我们研究图一的代码，发现就是我们平常使用的定义边框的方式：border:40px solid #0f0;这样我们就可以得到一个宽高均为20像素，边框为40像素的正方形；

继续，研究图二的代码，也是很简单实现，只不过给各个边框添加了颜色罢了，不过我们却发现了惊人的变化，每个边框与边框之间竟然是产生了斜线，并且这个时候产生了4个梯形，聪明的你一定会有一种原来如此的感觉，并且同时联想到如果没有中间的空白那样不就产生了三角形了吗...

是的，如你所想，图三就是你脑子中的东西，我们看到代码“width: 0px; height: 0px;”这样空白部分就没有了，不过这时你可能还需要注意一个细节（加粗显示的部分），“font-size: 0”，是的就是这里，为了兼容ie6，去除ie610像素高度的bug(必要的时候需要用到line-height:0;)。至此，我们再告一段落，接下来你是不是想要告诉我，将其他的三个边框颜色转化成背景色就变成了一个三角形呢？是的，的确是这个样子。但是不要着急，我们接下来研究下图四。

同图三只有细微的不同，右边边框的宽度增加了，变成了80像素，然后你看到了产生了4个非直角的三角形，但是这个又有神马用呢？我可以肯定的说，只要用心思考，这个还是比较好玩的，因为我们三角形的领域已经不再局限于直角的了...呵呵，各位看官请继续给下看

贴上面图形代码：

<div style="width: 0px; height: 0px; display: inline-block; border: 40px solid #fff; border-left-color: #f00; border-right-color: #03f; font-size: 0; float: left;"></div>

<div style="width: 0px; height: 0px; display: inline-block; margin-left: 20px; border: 40px solid #fff; border-left-color: #f00; border-top-color: #0f0; font-size: 0; float: left;"></div>

<div style="width: 0px; height: 0px; display: inline-block; margin-left: 20px; border: 40px solid #fff; border-bottom-color: #f70; font-size: 0; float: left;"></div>

定义了一个“border:40px solid #fff ;”，然后给边框定义不同的颜色值就行了，如果想要显示下面的三角形，只给下面的图形定义颜色即可。

二、border变形记之高级进阶

三、border变形记之分步导航效果（火箭组装法）

<style type="text/css">

#step{margin:50px;font-size:16px;color:#fff;letter-spacing:0.5em;}

#step a{width:100px;height:30px;background:#9BBB38;text-align:center;display:inline-block;line-height:30px;position:relative;margin-right:20px;}

#step a s{width:0px;height:0px;border:15px solid #9BBB38;border-left-color: transparent; _border-left-color: snow; _filter: chroma(color=snow);font-size:0;line-height:0;position:absolute;left:-30px;top:0px;}

#step a b{width:0px;height:0px;border:15px solid #fff;border-left-color:#9BBB38;font-size:0;line-height:0;position:absolute;top:0px;right:-30px;}

#step .first{border-left-color:#9BBB38}

#step .last{border-color:#9BBB38;right:-15px;}

#step .on{background:#E58712;}

#step .on s{border:15px solid #E58712;border-left-color: transparent; _border-left-color: snow; _filter: chroma(color=snow);}

#step .on b{border-left-color:#E58712;}

</style>

<div id="step">

         <a><s class="first"></s>注册<b></b></a>

         <a class="on"><s></s>登录<b></b></a>

         <a><s></s>下单<b></b></a>

         <a><s></s>付款<b class="last"></b></a>

</div>

四、border变形记之变态版

每个技术人员都在追求是技术的更高层次，更深层次。所以当你以为某个技术点已经结束了的时候，或许之前你所领悟到的仅仅是个开始。关键在于你是否能够利用你掌握的知识去探索并创造。下面一个简单的border变形记的变态版，技术内容很低级，想法还是可以的。欢迎重口味！

<style type="text/css">

#arr{position:relative;margin-top:100px;margin-left:100px;}

#arr a{width:0px;height:0px;border-width:50px 75px;border-style:solid;border-color:transparent;_border-color:snow; _filter:chroma(color=snow);border-left-color:#000;position:absolute;left:200px;top:0px;line-height:0;}

#arr s{width:0px;height:0px;border-color:transparent;_border-color:snow; _filter:chroma(color=snow);border-left-color:#fff;border-width:50px 20px;border-style:solid;position:absolute;top:0px;left:200px;line-height:0;}

#arr b{width:150px;height:20px;background:#000;display:block;position:absolute;left:70px;top:40px;}

</style>

<div id="arr">

         <a></a>

         <s></s>

         <b></b>

</div>

三角形变形记之纯css实现的分布导航条效果的更多相关文章

纯CSS实现各类气球泡泡对话框效果
原文纯CSS实现各类气球泡泡对话框效果一.关于纯CSS实现气泡对话框首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...
一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文 ...
一款纯css实现的漂亮导航
今天给大家分享一款纯css实现的漂亮导航.之前为大家分享过jquery实现的个人中心导航菜单,今天这款也是适合放在个人中心.还带来图标,效果不错.一起看下效果图: 在线预览源码下载实现的代码. ...
Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float，实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写，小写转大写，数字保留，其他除外从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法纯CSS打造淘宝导航菜单栏 C# Winform
Expression构建DataTable to Entity 映射委托 1 namespace Echofool.Utility.Common { 2 using System; 3 using ...
纯CSS实现项目展示遮罩详情效果
本实例主要用于项目展示时鼠标hover后显示一个遮罩显示项目详情的效果,遮罩采用CSS的绝对定位以及CSS3盒子模型. 本实例应用广泛,很多品牌官方网站均有采用. hover: <!DOCTYP ...
css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
纯js和纯css+html制作的手风琴的效果
一:纯css+html的手风琴效果这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...
超强的纯 CSS 鼠标点击拖拽效果
背景鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

随机推荐

通过自己技能把某个网站的ppt全部下载下来的过程
1.该网站的ppt链接全部都在页面上,用正则手动提取所有链接,放在指定位置的,以txt形式保存,格式如下 2.写个java文件处理一下,如下: package platform; import jav ...
python 3 安装 scrapy 并运行成功
今天,python 3 安装 scrapy, 并运行成功.特此纪念! 我的环境:windows 10(64位) + python 3.5.2(64位) 其中几个要点说明一下: 1.有几个依赖库需要事先 ...
GEOS库学习之三：空间关系、DE-9IM和谓词
要判断两个多边形的关系,实际上属于几何图形空间关系判断.几何图形并不只有多边形一种,它包括点.线.面构成的任何图形,两两之间相互关系也有很多种,因此空间关系非常复杂.根据前人的研究,总结出了DE-9I ...
typeof和instanceof简介及用法
typeof 使用方式:typeof a 或者 typeof (a) 返回一个string类型的值顾名思义,这货是检查类型的,输出的是一个string值,直接看下面的检测代码: console.lo ...
android文件上传到服务器
package uploadDemo; import java.io.DataOutputStream;import java.io.File;import java.io.FileInputStre ...
iOS不得姐项目--appearance的妙用,再一次设置导航栏返回按钮,导航栏左右按钮的封装(巧用分类)
一.UI_APPEARANCE_SELECTOR 彩票项目中appearance的用法一直没有搞明白,这次通过第二个项目中老师的讲解,更深一层次的了解到了很多关于appearance的作用以及使用方法 ...
SEO 相关知识
传统SEO 观念换独立服务器加硬件减少http请求,压缩网页体积 css 放页面顶部,js 放页面底部一个中等规模网站的架构技术角度切换不同的 User-agent Chrome 的 Ne ...
Java基础-数据类型转换
1).简单类型数据间的转换,有两种方式:自动转换和强制转换,通常发生在表达式中或方法的参数传递时. 自动转换当一个较"小"数据与一个较"大"的数据一起运算 ...
Throwable和Exception的区别
Java语言要求java程序中(无论是谁写的代码)所有抛出(throw)的异常都必须是从Throwable派生而来.当然,实际的Java编程中,由于JDK平台已经为我们设计好了非常丰富和完整的异常对象 ...
可视化HTML编辑器
[荐] 可视化HTML编辑器 CKEditor CKEditor是新一代的FCKeditor,是一个重新开发的版本.CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛 ...

三角形变形记之纯css实现的分布导航条效果

三角形变形记之纯css实现的分布导航条效果的更多相关文章

随机推荐

热门专题