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


Posted in HTML / CSS onMay 24, 2019

最外层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实现六边形边框的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3 特效范例整理
Aug 22 HTML / CSS
css3进行截取替代js的substring
Sep 02 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 #HTML / CSS
css3实现可拖动的魔方3d效果
May 07 #HTML / CSS
CSS3 实现童年的纸飞机
May 05 #HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 #HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 #HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 #HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 #HTML / CSS
You might like
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
php 浮点数比较方法详解
2017/05/05 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
python实现简单购物商城
2016/05/21 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
Python文件读写常见用法总结
2019/02/22 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
Java servlet面试题
2012/03/04 面试题
《鲁班和橹板》教学反思
2014/04/27 职场文书
夏季药店促销方案
2014/08/22 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
2014年督导工作总结
2014/11/19 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
诚信高考倡议书
2019/06/24 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python