css3实现六边形
实现原理:
这个效果的主要css样式有:
1.>transform: rotate(120deg); 图片旋转
2.>overflow:hidden; 超出隐藏
3.>visibility: hidden; 也是隐藏,与display:none;相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置
我们要用到3层div进行旋转来得到这个效果(ps:3层div的大小是一样的)。
最外层div(boxF)旋转120度。第二层(boxS)旋转-60度,第三层(boxT)再旋转-60度,此时刚好回正。我们的图片就放在第3层的div背景中。因为前两层div中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层div设置visibility: hidden; 而第3层div是放图片的,需要显示出来,因此设置visibility: visible; (ps:如果你不对第3层div设置visibility: visible;那它默认就会继承第二层div(boxS)的visibility: hidden; )。经过旋转肯定有超出的部分,因此对3个div都设置overflow:hidden;
经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意,那就是div的宽高比例必须满足4:5,不然得到的就不是6边形了。
下面给出DEMO代码:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 实现六边形图片展示效果</title> <style type="text/css"> body, div, img, ul, li { margin: 0; padding: 0; } body { font-size: 12px; background-color: #DDD; min-width: 1200px; } ul, ul li { list-style: none; } .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; } </style> </head> <body> <div class="boxF"> <div class="boxS"> <div class="boxT" style="background-image: url(http://b.hiphotos.baidu.com/image/pic/item/10dfa9ec8a1363272bc51737938fa0ec08fac78e.jpg);"></div> </div> </div> </body> </html>
八边形比六边形好实现
任何事物的某一种状态永远不会一成不变。