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

  发布时间:2019-05-24 15:22:17   作者:佚名   我要评论

这篇文章主要介绍了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实现多样的边框效果

    本文通过实例代码给大家介绍了基于csss3实现多样的边框效果,有半透明边框,多重边框,边框内圆角,具体效果图和实现代码大家参考下本文
    2018-05-04
  • css3 边框、背景、文本效果的实现代码

    这篇文章主要介绍了css3 边框、背景、文本效果的实现代码,需要的朋友可以参考下
    2018-03-21
  • CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集

    这篇文章主要介绍了CSS3动画中流彩文字效果+图片模糊效果+边框伸展效果实现,blur滤镜实现和SVG滤镜实现以及SVG作为背景图片载入等操作步骤实现功能,具体操作步骤大家可查
    2017-08-18
  • 利用CSS3伪元素实现逐渐发光的方格边框

    这篇文章主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来
    2017-05-07
  • 纯CSS3制作的鼠标悬停时边框旋转

    本文给大家分享一段css3代码实现鼠标悬停时边框旋转的效果,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-01-03
  • CSS3实现多背景模拟动态边框的效果

    前几天在工作的时候遇到一个问题,项目需要实现一个效果,当鼠标移入一个元素的时候,元素出现一个动态的边框,通过网上查找资料看到有人推荐可以使用Css3来实现,后来试了
    2016-11-08
  • CSS3圆角边框和边界图片效果实例

    这篇文章主要为大家详细介绍了CSS3边框的不同效果实现代码,包括CSS3圆角边框、盒阴影、边界图片的制作方法,感兴趣的小伙伴们可以参考一下
    2016-07-01

最新评论