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

 ok，廢話免談。在之前的文章中曾經(jīng)寫到過一篇“三角形變形記之純css實現(xiàn)的分布導(dǎo)航條效果”，其中用到了邊框?qū)崿F(xiàn)三角形的效果。最近又折騰了一個六邊形的蜂窩效果給大家蹂躪。主要用到了是兩個絕對定位的三角形，一個在上面一個在下面。配合一個長方形拼接成了六邊形。該效果兼容各大主流瀏覽器，支持hover效果，重要的是純css實現(xiàn)的。不多說了，大家運行代碼觀看效果吧。

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

在之前的三角形變形記之純css實現(xiàn)的分布導(dǎo)航條效果文章中寫了比較詳細的邊框?qū)崿F(xiàn)三角形的方法，但是在針對ie6的方法上不是特別的完美?，F(xiàn)在發(fā)出最新的兼容ie6的方法，就是非顯示的邊框border-style設(shè)置為dotted，需要顯示的邊框border-style設(shè)置為solid；

提示：請在ie6下對比查看，如有bug歡迎反饋

純css實現(xiàn)六邊形的高級進階

實現(xiàn)了六邊形難免想要整出點幺蛾子來。下面我給該六邊形加了一個背景圖，做背景平鋪到六邊形的后面。樣式可以簡單實現(xiàn)了，但是仍舊存在諸多的不足，1是ie的兼容問題，然后是如果存在多個的情況下，不能實現(xiàn)蜂窩的效果。哪位高手如能完美實現(xiàn)，還請告知。下面看我實現(xiàn)代碼：

實現(xiàn)原理上比較單純，在之前的蜂窩效果上加個背景圖。設(shè)置顯示的邊框的背景顏色是透明。需要注意的是采用的圖片的高度等于整個六邊形的高度（比如我這張圖片的高度=長方形高度58+上面三角形border-bottom寬度30+下面三角形border-top寬度30=118px），并設(shè)置上下部分的背景為同一個圖片，上面的用background-position定位到top center;下面的圖片定位到 bottom center;這樣的話整個圖片剛好被遮住形成六邊形背景的效果。不過仍舊是有不足的。歡迎大家提出更好的方法。

蜂窩來襲，Are you ready ?
最后采用了css偽類元素，并結(jié)合jquery做了一個真正的蜂窩效果。當然ie6是不在兼容范圍內(nèi)的。感興趣的朋友自行折騰吧。代碼寫的比較匆忙，也比較粗糙。大家看后樂呵樂呵就罷了。不過還是那句話，有問題歡迎留言討論。

最新評論