纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)

网页制作 2024/12/26 佚名

3 2 1

博客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的兼容效果。

在之前的三角形变形记之纯css实现的分布导航条效果文章中写了比较详细的边框实现三角形的方法，但是在针对ie6的方法上不是特别的完美。现在发出最新的兼容ie6的方法，就是非显示的边框border-style设置为dotted，需要显示的边框border-style设置为solid；

提示：请在ie6下对比查看，如有bug欢迎反馈

提示：您可以先修改部分代码再运行
纯css实现六边形的高级进阶

实现了六边形难免想要整出点幺蛾子来。下面我给该六边形加了一个背景图，做背景平铺到六边形的后面。样式可以简单实现了，但是仍旧存在诸多的不足，1是ie的兼容问题，然后是如果存在多个的情况下，不能实现蜂窝的效果。哪位高手如能完美实现，还请告知。下面看我实现代码：

<!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;background:url(http://www.niumowang.org/wp-content/uploads//2012/08/b.png) center;} .nav s{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px dotted #fff;border-right:50px dotted #fff;border-bottom:30px solid transparent;left:0px;top:-30px;background:url(http://www.niumowang.org/wp-content/uploads//2012/08/b.png) top center;} .nav b{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px dotted #fff;border-right:50px dotted #fff;border-top:30px solid transparent;bottom:-30px;left:0px;background:url(http://www.niumowang.org/wp-content/uploads//2012/08/b.png) bottom center;} </style> </head> <body> <div class="wrap"> <a class="nav a0" target="_blank" href="#"><s></s>！！妹纸！！<b></b></a> </div> </body> </html>

提示：您可以先修改部分代码再运行
实现原理上比较单纯，在之前的蜂窝效果上加个背景图。设置显示的边框的背景颜色是透明。需要注意的是采用的图片的高度等于整个六边形的高度（比如我这张图片的高度=长方形高度58+上面三角形border-bottom宽度30+下面三角形border-top宽度30=118px），并设置上下部分的背景为同一个图片，上面的用background-position定位到top center;下面的图片定位到 bottom center;这样的话整个图片刚好被遮住形成六边形背景的效果。不过仍旧是有不足的。欢迎大家提出更好的方法。

蜂窝来袭，Are you ready ?
最后采用了css伪类元素，并结合jquery做了一个真正的蜂窝效果。当然ie6是不在兼容范围内的。感兴趣的朋友自行折腾吧。代码写的比较匆忙，也比较粗糙。大家看后乐呵乐呵就罢了。不过还是那句话，有问题欢迎留言讨论。

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>蜂窝来袭，Are you ready ?</title> <style> html,body{margin:0;padding:0;width:100%;} #wrap{margin:0;padding:0;width:100%;} #wrap:after{content:"";display:block;height:0;clear:both;visibility: hidden;overflow:hidden;} .post{width:120px;height:80px;display:inline-block;background:#0099ff;float:left;border-right:1px dotted #fff;border-left:1px dotted #fff;margin-top:100px;position:relative;overflow:visible;margin-top:52px;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;} .post:before{content:"<em></em>";width:0px;height:0px;display:inline-block;border-left: 60px dotted transparent; border-right: 60px dotted transparent; border-bottom: 50px solid #0099ff;font-size:0;position:absolute;top:-50px;left:0px;} .post:after{content:"<em></em>";width:0px;height:0px;display:inline-block;border-left: 60px dotted transparent; border-right: 60px dotted transparent; border-top: 50px solid #0099ff;font-size:0;position:absolute;bottom:-50px;left:0px;} </style> </head> <body> <div id="wrap"> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> </div> <script src="/UploadFiles/2021-03-30/jquery.min.js"><br><input class="fn-butt" type="button" value="运行代码" onclick="runCode('runcode27')"> <input class="fn-butt" type="button" value="复制代码" onclick="copy2(runcode27)"> <input class="fn-butt" type="button" value="另存代码" onclick="saveCode(runcode27)">  提示：您可以先修改部分代码再运行</div>

</div>
                                <div class="tags my-2">
                                    <i class="iconfont icon-tags"></i><a href="/LoadingPageT/1/73500.html" rel="tag" class="tag-%e6%a0%b8%e6%b3%84%e6%bc%8f color-6" title="蜂窝,六边形">蜂窝,六边形</a> </div>
                                <div class="post-apd">
                                    <strong>标签：</strong><a href="/LoadingPageT/1/73500.html" title="蜂窝,六边形">
                                        <h5>蜂窝,六边形</h5>
                                    </a> <Br /></div>
                            </div>
                        </div>
                        <div class="single-top-area text-sm clearfix card mt-4">
                            <div class="card-body">
                                <strong>免责声明：</strong>本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com</a>
                            </div>
                        </div>
                        <div class="near-navigation rounded mt-4 py-2">
                            <div class="nav previous border-right border-color">
                                <a class="near-permalink" href="#">
                                    <span>上一篇</span>
                                    <h4 class="near-title"><a href="/LoadingPageT/1/73499.html" title="ie6不兼容hover ie6 a hover属性失效解决办法">ie6不兼容hover ie6 a hover属性失效解决办法</a></h4>
                                </a>
                            </div>
                            <div class="nav next border-left border-color">
                                <a class="near-permalink" href="#">
                                    <span>下一篇</span>
                                    <h4 class="near-title"><a href="/LoadingPageT/1/73501.html" title="word-wrap与word-break 属性的概述及浏览器默认处理">word-wrap与word-break 属性的概述及浏览器默认处理</a></h4>
                                </a>
                            </div>
                        </div>
                        
                        <div class="post-apd mt-4">千金楼资源网 Copyright www.htabc.com</div>
                        <div id="comments" class="comments">
                            <h1 id="comments-list-title" class="comments-title h5 mx-1 my-4">
                                <i class="iconfont icon-comment"></i>
                                <span class="noticom">
                                    <a href="/LoadingPageT/1/73500.html#respond" class="comments-title" title="纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)">评论“纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)”</a>
                                </span>
                            </h1>
                            <div class="card">
                                <div class="card-body">
                                    <div id="respond_box">
                                        <div id="respond" class="comment-respond">
                                            <div class="visitor-avatar d-flex flex-fill mb-2">
                                                <img class="v-avatar rounded-circle" src="/images/logos.png"><a href="/LoadingPageT/1/73500.html#Description" title="纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)">纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)</a>
                                            </div>
                                            <div class="comment-textarea mb-3">
                                                <textarea name="comment" id="comment" class="form-control" placeholder="输入对“纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)”评论内容..." tabindex="4" cols="50" rows="3">

暂无“纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)”评论...

纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接