三角形变形记之纯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 守护进程一
守护进程是一个后台进程,它无需用户输入就能运行,经常是提供某种服务. LInux作为服务器,主要的进程也都是为系统或用户提供后台服务功能. 常见的守护进程有Web服务器.邮件服务器以及数据库服务器等等 ...
C语言二级指针内存模型③
//二级指针内存模型③ #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #incl ...
jQuery使用ajax跨域获取数据
var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = ...
在opencv3中实现机器学习算法之：利用最近邻算法（knn)实现手写数字分类
手写数字digits分类,这可是深度学习算法的入门练习.而且还有专门的手写数字MINIST库.opencv提供了一张手写数字图片给我们,先来看看这是一张密密麻麻的手写数字图:图片大小为1000*20 ...
从0开始学Java——JSP&Servlet——如何部署web应用程序
web容器要求应用程序部署时,需要像下面这样组织其目录结构: 手动去创建这样的目录结构还是挺麻烦的,所幸我们有开发工具,所以可以像下面这样来部署一个web项目. 1)确认程序代码已经完成: 2)在ec ...
ios 消息推送流程转载
iOS开发:推送通知简述及开发实践热度 1已有 706 次阅读 2013-10-15 09:23 |个人分类:经验之谈|系统分类:ios| IOS, 推送一.关于推送通知推送通知,也被叫做远程通知, ...
讲述一下自己在linux中配置ftp服务的经历
本人大二小白一名,从大一下学期就开始接触到linux,当时看到学校每次让我们下载资源都在一个ftp服务器中,感觉特别的高大上,所以自己就想什么时候自己能够拥有自己的ftp服务器,自己放一点东西进去,让 ...
开源分布式计算引擎 & 开源搜索引擎 Iveely 0.5.0 为大数据而生
Iveely Computing 产生背景 08年的时候,我开始接触搜索引擎,当时遇到的第一个难题就是大数据实时并发处理,当时实验室的机器我们可以随便用,至少二三十台机器,可以,却没有程序可以将这些机 ...
vitualbox 主机与虚拟机能相互访问的设置
1. 桥接网卡 2. 界面名称:802.11n USB Wireless Lan Card 3. 混杂模式:全部允许 4. 接入网线打勾 5. 确定
ASP.NET服务器控件使用之MultiView和View
MultiView 控件是一组 View 控件的容器.使用它可定义一组 View 控件,其中每个 View 控件都包含子控件. 用 ActiveViewIndex 属性或SetActiveView 方 ...

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

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

随机推荐

热门专题