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

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

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

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

提示：請(qǐng)?jiān)趇e6下對(duì)比查看，如有bug歡迎反饋

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

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

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

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

最新評(píng)論