純css實現的六邊形(蜂窩)導航效果(支持hover/兼容瀏覽器)

2024-07-11 08:29:01

字體：大中小

來源：轉載

供稿：網友

博客foreach(everyday){久}不更新了，關于前端開發方面的東西最近關注也沒有往常頻繁了。百度大神依舊對我的網站不聞不顧，無奈。但是技術還是要提高，分享依舊要繼續。順應一句話，你收或者不收，我都在這里。只增不減，不悲不喜。

ok，廢話免談。在之前的文章中曾經寫到過一篇“三角形變形記之純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>

提示：您可以先修改部分代碼再運行

具體實現的原理部分就不多說了，大家下載下來代碼稍加研究就明白了。利用這個效果可以做多種多樣的效果。關鍵是看每個人的思維發散空間，我比較笨，做不來特別有想法的東西，僅此提供方法給那些有想法的developer。另外下面說下一個關于邊框實現三角形在ie6的兼容效果。

上一篇：ie6不兼容hover ie6 a hover屬性失效解決辦法

下一篇：IE濾鏡與CSS3效果(詳細整理分享)