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代码
好看的css代码<div class="boxF">
<div class="boxS">
<div class="boxT" ></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实现六边形边框的实例代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。