javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:主页 > WEB前端 > CSS-HTML >

纯CSS实现的六边形(蜂窝导航效果)

来源:IT技术网编辑:一页书发布于:2013-06-17人围观CSS导航六边形蜂窝

要实现一个六边形的蜂窝效果,主要用到了是两个绝对定位的三角形,一个在上面一个在下面。配合一个长方形拼接成了六边形。该效果兼容各大主流浏览器,支持hover效果,重要的是纯css实现的。不多说了,大家看代码吧。

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>六边形</title>
<style>
.wrap{margin:100px;width:303px;}
.nav{width:100px;height:58px;background:#339933;display:inline-block;position:relative;line-height:58px;text-align:center;color:#ffffff;font-size:14px;text-decoration:none;float:left;margin-top:31px;margin-right:1px;}
.nav s{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px dotted transparent;border-right:50px dotted transparent;border-bottom:30px solid #339933;left:0px;top:-30px;}
 
.nav b{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px dotted transparent;border-right:50px dotted transparent;border-top:30px solid #339933;bottom:-30px;left:0px;}
 
.a0{margin-left:100px;}
.a1{margin-left:50px;}
 
.nav:hover{background:#8CBF26;color:#333333;}
.nav:hover s{border-bottom-color:#8CBF26;}
.nav:hover b{border-top-color:#8CBF26;}
</style>
</head>
<body>
<div class="wrap">
<a class="nav a0" target="_blank" href="#"><s></s>广播<b></b></a>
<a class="nav a1" target="_blank" href="#"><s></s>广播<b></b></a>
<a class="nav a2" target="_blank" href="#"><s></s>广播<b></b></a>
<a class="nav a3" target="_blank" href="#"><s></s>广播<b></b></a>
<a class="nav a4" target="_blank" href="#"><s></s>广播<b></b></a>
<a class="nav a5" target="_blank" href="#"><s></s>广播<b></b></a>
</div>
</body>
</html>

另外下面说下一个关于边框实现三角形在ie6的兼容效果。

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ie6下实现三角形</title>
</head>
<body style="background:#ececec;">
<div style="width: 0px; height: 0px; display: inline-block; margin-left: 20px; border: 40px solid transparent; border-bottom-color: #f70; font-size: 0; float: left;">
</div>
<div style="width: 0px; height: 0px; display: inline-block; margin-left: 20px; border: 40px solid transparent;_border-color: snow; _filter: chroma(color=snow); border-bottom-color: #f70; font-size: 0; float: left;">
</div>
<div style="width: 0px; height: 0px; display: inline-block; margin-left: 20px; border: 40px dotted transparent; border-bottom:40px solid #f70; font-size: 0; float: left;">
</div>
</body>
</html>

CSS,导航,六边形,相关的文章
有时间的话来看看IT界的突发事件