CSS border实现三角形

今天实在闲得慌，上午html练手，仿写博客园的横向导航菜单。下午没事情做到CodePlex上闲狂，突然留意了一下codeplex上的一个导航特效：如下

上图中红色圈出来的地方下方有个小三角，以前碰到这样的图形脑子里总是认为那是一张图片。我很随意的就用firebug查看了下，结果找了半天没有图片，发现是li里面有一个超链接a和一个没有任何内容的div，

原型代码如下：

根本不是我想的那样，不是一张图片。接着在firebug里里面各种修改这个div的css属性发现，下面的那个三角形确实是div生成的。

我就把相应的属性一个个复制出来进行试验，结果奇妙的各种三角形和梯形生就呈现在我的眼前。下面是一个例子：

html 代码：

<!DOCTYPE html>
<html>
<head>
<title>css border生成各种三角形</title>
<style type="text/css">
div{width:0;height:0;border-style:solid;border-width:10px;}
#down{border-color:#7B4F9D #fff #fff #fff;}
#up{border-color:#fff #fff #7B4F9D #fff;}
#left{border-color:#fff #7B4F9D #fff #fff;}
#right{border-color:#fff #fff #fff #7B4F9D;}
#left-down{border-width:30px 10px;border-color:#7B4F9D #fff #FFF #7B4F9D;}
</style>
</head>
<body>
<div id="down"></div>
<div id="up"></div>
<div id="left"></div>
<div id="right"></div>
<div id="left-down"></div>
</body>
</html>

 

效果图如下：

写了这么长时间的html到现在才发现这样也成呀。于是乎在google,百度搜索了一下，居然搜出一大片的效果实例，一下是比较有参考性的博客连接：

http://www.zhangxinxu.com/wordpress/?p=651， http://www.csscss.org/csssample/2010223694.shtml 。

看了鑫空间 实例，居然还能实现一些圆角效果，技术还真是神奇呀。不过遗憾的是浏览器到底是怎么样解析border叠加效果的就不知所以然了。这里有人简单的介绍了下http://zsuczw.iteye.com/blog/1314976 ,不过我认为那只是猜测的，不是根本原因解释，还有待研究。今天收获不小，期待明天的收获更多。。。

posted @ 2013-01-07 19:31  st_gloden  阅读(240)  评论(0)  编辑  收藏  举报