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+jq创作含苞待放的荷花
Feb 20 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 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
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
初步讲解Python中的元组概念
2015/05/21 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
南京某公司笔试题
2013/01/27 面试题
商场消防管理制度
2014/01/12 职场文书
人民的好儿女观后感
2015/06/18 职场文书
红与黑读书笔记
2015/06/29 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL