内容简介:最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度,此时刚好回正,然后把图片就放在第3层的div背景中。因为前两层div中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层div设置经过旋转肯定有超出的部分,因此对3个div都设置
最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度,此时刚好回正,然后把图片就放在第3层的div背景中。因为前两层div中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层div设置 visibility: hidden
; 而第3层div是放图片的,需要显示出来,因此设置 visibility: visible;
经过旋转肯定有超出的部分,因此对3个div都设置 overflow:hidden;
经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。
注意:
- 如果不对第3层div设置
visibility: visible;
那它默认就会继承第二层div(boxS)的visibility: hidden;
- 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; }
教程转自:https://www.cnblogs.com/wwlhome/p/5970442.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 从三明治到六边形
- Netflix 的六边形架构实践
- 如何用 HTML 打印一个六边形
- 为什么需要六边形架构?- silkandspinach
- 六边形之端口和适配器架构 - cockburn
- 用六边形架构构建可维护系统 - IlkkaSeppälä
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Pragmatic Programmer
Andrew Hunt、David Thomas / Addison-Wesley Professional / 1999-10-30 / USD 49.99
本书直击编程陈地,穿过了软件开发中日益增长的规范和技术藩篱,对核心过程进行了审视――即根据需求,创建用户乐于接受的、可工作和易维护的代码。本书包含的内容从个人责任到职业发展,直至保持代码灵活和易于改编重用的架构技术。从本书中将学到防止软件变质、消除复制知识的陷阱、编写灵活、动态和易适应的代码、避免出现相同的设计、用契约、断言和异常对代码进行防护等内容。一起来看看 《The Pragmatic Programmer》 这本书的介绍吧!
HTML 编码/解码
HTML 编码/解码
html转js在线工具
html转js在线工具