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无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
html5 标签
Jul 16 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 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
10款实用的PHP开源工具
2015/10/23 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
js正则表达式简单校验方法
2021/01/03 Javascript
python发送arp欺骗攻击代码分析
2014/01/16 Python
Python实现快速多线程ping的方法
2015/07/15 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
两年的个人工作自我评价
2014/01/10 职场文书
工作迟到检讨书
2014/02/21 职场文书
我的长生果教学反思
2014/04/28 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
高三教师工作总结2015
2015/07/21 职场文书
靠谱准确的求职信
2019/04/02 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
python基础之文件操作
2021/10/24 Python
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏