css3实现六边形边框的实例代码

网页制作 2024/12/27 佚名

3 1 2

清风细雨楼 Design By www.eepep.com

最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度，此时刚好回正，然后把图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层div设置 visibility: hidden ; 而第3层div是放图片的，需要显示出来，因此设置 visibility: visible;

经过旋转肯定有超出的部分，因此对3个div都设置 overflow:hidden; 经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。

注意：

1. 如果不对第3层div设置 visibility: visible; 那它默认就会继承第二层div（boxS）的 visibility: hidden;
2.div的宽高比例必须满足4：5，不然得到的就不是六边形了。

实现原理：

•transform: rotate(120deg); 图片旋转
•overflow:hidden; 超出隐藏
•visibility: hidden; 也是隐藏，与 display:none; 相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置

实现代码：

HTML代码

<div class="boxF">
    <div class="boxS">
        <div class="boxT" style="background-image: url(tupian.jpg);"></div>
    </div>
</div>

CSS代码

.boxF, 
.boxS, 
.boxT, 
.overlay {
 width: 200px;
 height: 250px;
 overflow: hidden;
}
.boxF, 
.boxS {
 visibility: hidden;
}
.boxF {
 transform: rotate(120deg);
 float: left;
 margin-left: 10px;
 -ms-transform: rotate(120deg);
 -moz-transform: rotate(120deg);
 -webkit-transform: rotate(120deg);
}
.boxS {
 transform: rotate(-60deg);
 -ms-transform: rotate(-60deg);
 -moz-transform: rotate(-60deg);
 -webkit-transform: rotate(-60deg);
}
.boxT {
 transform: rotate(-60deg);
 background: no-repeat 50% center;
 background-size: 125% auto;
 -ms-transform: rotate(-60deg);
 -moz-transform: rotate(-60deg);
 -webkit-transform: rotate(-60deg);
 visibility: visible;
}

总结

以上所述是小编给大家介绍的css3实现六边形边框的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

css3,六边形边框,css3,边框

清风细雨楼 Design By www.eepep.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

清风细雨楼 Design By www.eepep.com

评论“css3实现六边形边框的实例代码”

暂无评论...

www.eepep.com 清风细雨楼

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

更新日志

2024年12月27日

css3实现六边形边框的实例代码

CSS3 分类菜单效果

CSS 响应式布局系统的实例代码

评论“css3实现六边形边框的实例代码”

更新日志

友情链接