三角形变形记之纯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 ...

随机推荐

C语言数组之无限循环
#include<stdio.h> #include<stdlib.h> #include<Windows.h> //定于数组的大小 #define N 10 vo ...
Oracle11G 7个服务说明
中的方法成功安装Oracle 11g后,共有7个服务, 这七个服务的含义分别为: 1. Oracle ORCL VSS Writer Service: Oracle卷映射拷贝写入服务,VSS(Volu ...
自己实现一个高大尚的Android客户端
毕业差不多一年了,一直做得都是很底层的东西,由于面向的客户群不同,主要实现在于功能,效率,没有很炫的界面,客户也并不在意界面有多炫.看到各大市场各种高大尚的app,简直亮瞎了我的眼啊,下决心自己实现一 ...
[CareerCup] 10.3 Integer not Contain in the File 文件中不包含的数
10.3 Given an input file with four billion non-negative integers, provide an algorithm to generate a ...
[CareerCup] 13.5 Volatile Keyword 关键字volatile
13.5 What is the significance of the keyword "volatile" in C 这道题考察我们对于关键字volatile的理解,顾名思义, ...
系统级I/O 第八周11.9~11.15
第十章系统级I/O cp1 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include ...
20145316GDB调试汇编堆栈
GDB调试例子的汇编堆栈代码直接-m32编译出现问题编译64位Linux版本32位的二进制文件,需要安装一个库,使用指令sudo apt-get install libc6-dev-i386 编 ...
在MacBook Air 上装Win10的，反反复复的失败过程。
这个月初,一个女性朋友托我帮她装电脑,往MacBook Air上面装Windows 系统,原因是windows用的习惯,用起来顺手.然后用脚趾头考虑了一下,就一口答应下来了.难道这就是一个标准程序员的 ...
开源分布式实时计算引擎 Iveely Computing 之 WordCount 详解(3)
WordCount是很多分布式计算中,最常用的例子,例如Hadoop.Storm,Iveely Computing也不例外.明白了WordCount在Iveely Computing上的运行原理,就很 ...
微信小程序开发公测，小程序账号申请办法攻略
11月3号晚上 10 点,微信公众平台发布公告,宣布微信小程序正式开放公测.此次小程序公测允许开发者将产品提交至微信公众平台审核,但是暂时不支持发布,也就是说普通消费者若想体验小程序,还需要等待一段时 ...

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

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

随机推荐

热门专题