脚本宝典收集整理的这篇文章主要介绍了css3实现六边形边框的实例代码,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最外层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实现六边形边框的实例代码所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。