欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-16 08:58:16
这篇文章主要介绍了css3实现六边形边框的实例代码,需要的朋友可以参考下... 19-05-24...

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

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

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

注意:

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实现六边形边框的实例代码,希望对大家有所帮助