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

随机推荐

Linux 发送信号
使用kill命令 --在命令行执行kill命令.向指定进程发送信号. 使用kill函数 int kill(pid_t pid,int sig); --参数pid指定一个要杀死的进程,而sig是要发送的 ...
CentOS 7 安装桌面环境
首先进入要使用root权限: 使用 yum grouplist可以看现在的安装情况以及支持哪些软件包. 使用 yum groupinstall "GNOME Desktop" &q ...
HashMap 中的 entrySet()使用方法 2016.12.28
package map; import java.util.HashMap; import java.util.Iterator; import java.util.Map.Entry; import ...
自定义GrildView实现单选功能
首先看实现功能截图,这是一个自定义Dialog,并且里面内容由GrildView 绑定数据源,实现类似单选功能. 首先自定义Dialog,绑定数据源自定义Dialog弹出框大小方法最主要实现的就是 ...
Linux基础入门（20135207 王国伊）
实验一 Linux系统简介一.实验心得首个实验是简单介绍了Linux系统的简介,了解Linux系统的历史和发展.使我受益匪浅实验二基本概念及操作一.学习目标 1.实验楼环境介绍 2.常用 ...
Python Web实战 - 基于Flask实现的黄金点游戏
一.简介团队成员: 领航者:张旭驾驶员:张国庆项目简介: 项目名称:基于B/S模式的黄金点游戏采用技术: 后端:Python + Sqlite3 前端:HTML + CSS + JS + Bo ...
swift第二季高级语法
一.类和结构体二.属性三.方法四.下标五.继承和扩展六.初始化和反初始化
大型网站系统架构实践（五）深入探讨web应用高可用方案
从上篇文章到这篇文章,中间用了一段时间准备,主要是想把东西讲透,同时希望大家给与一些批评和建议,这样我才能有所进步,也希望喜欢我文章的朋友,给个赞,这样我才能更有激情,呵呵. 由于本篇要写的内容有点多 ...
Linq之隐式类型、自动属性、初始化器、匿名类
目录写在前面系列文章隐式类型自动属性初始化器匿名类总结写在前面上篇文章是本系列的小插曲,也是在项目中遇到,觉得有必要总结一下,就顺手写在了博客中,也希望能帮到一些朋友.本文将继续介绍 ...
php Curl_setop 的学习
cur_op的学习 ###curl_setopt (int ch, string option, mixed value) option的参数 CURLOPT_INFILESIZE: 当你上传一个文件 ...

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

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

随机推荐

热门专题