蜂巢式图片布局类似这样的布局方式,一般主要用在导航,或者图片展示.
六边形的图片墙比普通正方形的图片排版比起来更加新颖,灵活,有新意.正六边形的图片展示还给人一种炫酷的感觉.并且带有特殊的规则感.
先做一个正六边形的DEMO:
怎么做一个六边形？其实是三个矩形div旋转60deg得到的，例如中间横着的橙色矩形。
先假定正六边形每个边的边长是100px,那么高度为173px(也就是矩形的宽度).
html代码如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 .box{ 8 margin: 100px auto; 9 } 10 .comm{ 11 height: 100px; 12 width: 173px; 13 position: absolute; 14 } 15 .first{ 16 background-color: orange; 17 } 18 .second{ 19 background-color: orchid; 20 transform: rotate(60deg); 21 -moz-transform: rotate(60deg); 22 -webkit-transform: rotate(60deg); 23 -ms-transform: rotate(60deg); 24 -o-transform: rotate(60deg); 25 } 26 .third{ 27 background-color: palegreen; 28 transform: rotate(-60deg); 29 -moz-transform: rotate(-60deg); 30 -webkit-transform: rotate(-60deg); 31 -ms-transform: rotate(-60deg); 32 -o-transform: rotate(-60deg); 33 } 34 </style> 35 </head> 36 <body> 37 <div class="box"> 38 <div class="comm first"></div> 39 <div class="comm second"></div> 40 <div class="comm third"></div> 41 </div> 42 </body> 43 </html>
效果截图:
注意:first second third 这三个div要绝对定位.并顺时针和逆时针旋转其中两个.
接下来就是把图片裁剪成六边形,先在first的div中加入图片.
1 <div class="comm first"> 2 <img src="img/1.jpg" alt="花花姑娘" title="花花姑娘" class="firstImg"> 3 </div>
注意：图片的宽度为div的宽度，高度为两倍div高度。为了图片不失真，最好把图片尺寸的高宽比裁为 根号3比2的。
first的z-index:999999;===在最顶层展示;
这里的图片还要向上移动一点,上移动图片高度的一半就可以.
1 .firstImg{ 2 margin-top: -50px; 3 }
设置父级first的css属性overflow:hidden;就可以裁剪了.
加入第二张和第三张图片:
第二张图片,第三张图片和第一张图片是同一张图片;类名不一样.
1 <div class="box"> 2 <div class="comm first"> 3 <img src="img/1.jpg" alt="花花姑娘" title="花花姑娘" class="firstImg"> 4 </div> 5 <div class="comm second"> 6 <img src="img/1.jpg" alt="花花姑娘" title="花花姑娘" class="secondImg"> 7 </div> 8 <div class="comm third"> 9 <img src="img/1.jpg" alt="花花姑娘" title="花花姑娘" class="thirdImg"> 10 </div> 11 </div>
因为插入的图片父级是旋转过的,所以此处需要图片旋转回来.与第一张图片拼合起来.还需要margin-top: -50px;
1 .secondImg{ 2 transform: rotate(-60deg); 3 -moz-transform: rotate(-60deg); 4 -webkit-transform: rotate(-60deg); 5 -ms-transform: rotate(-60deg); 6 -o-transform: rotate(-60deg); 7 margin-top: -50px; 8 } 9 .thirdImg{ 10 transform: rotate(60deg); 11 -moz-transform: rotate(60deg); 12 -webkit-transform: rotate(60deg); 13 -ms-transform: rotate(60deg); 14 -o-transform: rotate(60deg); 15 margin-top: -50px; 16 }
第二张图片旋转回来,第三张图片旋转回来.
得到了正六边形.
六边形的边其实是三个div的左边框及右边框围成的。所以只用设置border-left及border-right。
但要注意边框不要设置过大，否则会出现缺口，像这样：
之后我尝试使用border-style:inset;去解决这个问题.效果不理想;还是建议把border设置成1px的宽度.
代码整理:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>蜂巢式图片墙布局</title> 6 <style type="text/css"> 7 .box{ 8 margin: 100px auto; 9 } 10 .comm{ 11 height: 100px; 12 width: 173px; 13 position: absolute; 14 } 15 .first{ 16 background-color: orange; 17 z-index: 999999; 18 overflow: hidden; 19 border-left: 1px solid orange; 20 border-right: 1px solid orange; 21 } 22 .second{ 23 background-color: orchid; 24 overflow: hidden; 25 transform: rotate(60deg); 26 -moz-transform: rotate(60deg); 27 -webkit-transform: rotate(60deg); 28 -ms-transform: rotate(60deg); 29 -o-transform: rotate(60deg); 30 border-left: 1px solid orange; 31 border-right: 1px solid orange; 32 } 33 .third{ 34 background-color: palegreen; 35 overflow: hidden; 36 transform: rotate(-60deg); 37 -moz-transform: rotate(-60deg); 38 -webkit-transform: rotate(-60deg); 39 -ms-transform: rotate(-60deg); 40 -o-transform: rotate(-60deg); 41 border-left: 1px solid orange; 42 border-right: 1px solid orange; 43 } 44 .firstImg{ 45 margin-top: -50px; 46 } 47 .secondImg{ 48 transform: rotate(-60deg); 49 -moz-transform: rotate(-60deg); 50 -webkit-transform: rotate(-60deg); 51 -ms-transform: rotate(-60deg); 52 -o-transform: rotate(-60deg); 53 margin-top: -50px; 54 } 55 .thirdImg{ 56 transform: rotate(60deg); 57 -moz-transform: rotate(60deg); 58 -webkit-transform: rotate(60deg); 59 -ms-transform: rotate(60deg); 60 -o-transform: rotate(60deg); 61 margin-top: -50px; 62 } 63 </style> 64 </head> 65 <body> 66 <div class="box"> 67 <div class="comm first"> 68 <img src="img/1.jpg" alt="花花姑娘" title="花花姑娘" class="firstImg"> 69 </div> 70 <div class="comm second"> 71 <img src="img/1.jpg" alt="花花姑娘" title="花花姑娘" class="secondImg"> 72 </div> 73 <div class="comm third"> 74 <img src="img/1.jpg" alt="花花姑娘" title="花花姑娘" class="thirdImg"> 75 </div> 76 </div> 77 </body> 78 </html>
导航菜单:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>蜂巢</title> 6 <style type="text/css"> 7 .hex{ 8 float: left; 9 margin-left: 2px; 10 margin-bottom: -18px; 11 cursor: pointer; 12 } 13 .hex_top{ 14 width: 0; 15 border-bottom: 20px solid orange; 16 border-left: 35px solid transparent; 17 border-right: 35px solid transparent; 18 margin-top: -1px\9\0; 19 margin-top: 0px\0; 20 } 21 .hex_middle { 22 width: 70px; 23 height: 30px; 24 line-height: 30px; 25 background: orange; 26 text-align: center; 27 font-family: "宋体"; 28 color: #FFFFFF; 29 } 30 .hex_bottom { 31 width: 0; 32 border-top: 20px solid orange; 33 border-left: 35px solid transparent; 34 border-right: 35px solid transparent; 35 margin-top: -1px\9\0; 36 margin-top: 0px\0; 37 } 38 .hex-row.even{ 39 margin-left: 38px; 40 } 41 .hex-row { 42 clear: left; 43 } 44 .hex.hexActive .hex_top{ 45 width: 0; 46 border-bottom: 20px solid #86ccac; 47 border-left: 35px solid transparent; 48 border-right: 35px solid transparent; 49 margin-top: -1px\9\0; 50 margin-top: 0px\0; 51 } 52 .hex.hexActive .hex_middle{ 53 width: 70px; 54 height: 30px; 55 line-height: 30px; 56 background: #86ccac; 57 text-align: center; 58 font-family: "宋体"; 59 color: #FFFFFF; 60 } 61 .hex.hexActive .hex_bottom{ 62 width: 0; 63 border-top: 20px solid #86ccac; 64 border-left: 35px solid transparent; 65 border-right: 35px solid transparent; 66 margin-top: -1px\9\0; 67 margin-top: 0px\0; 68 } 69 </style> 70 </head> 71 <body> 72 <div class="hex"> 73 <div class="hex_top"></div> 74 <div class="hex_middle">首页</div> 75 <div class="hex_bottom"></div> 76 </div> 77 <div class="hex"> 78 <div class="hex_top"></div> 79 <div class="hex_middle">社区</div> 80 <div class="hex_bottom"></div> 81 </div> 82 <div class="hex"> 83 <div class="hex_top"></div> 84 <div class="hex_middle">导航</div> 85 <div class="hex_bottom"></div> 86 </div> 87 <div class="hex"> 88 <div class="hex_top"></div> 89 <div class="hex_middle">商城</div> 90 <div class="hex_bottom"></div> 91 </div> 92 <div class="hex hex-row even"> 93 <div class="hex_top"></div> 94 <div class="hex_middle">游戏</div> 95 <div class="hex_bottom"></div> 96 </div> 97 <div class="hex"> 98 <div class="hex_top"></div> 99 <div class="hex_middle">文件</div> 100 <div class="hex_bottom"></div> 101 </div> 102 <div class="hex"> 103 <div class="hex_top"></div> 104 <div class="hex_middle">视频</div> 105 <div class="hex_bottom"></div> 106 </div> 107 <div class="hex hex-row"> 108 <div class="hex_top"></div> 109 <div class="hex_middle">应用商店</div> 110 <div class="hex_bottom"></div> 111 </div> 112 <div class="hex"> 113 <div class="hex_top"></div> 114 <div class="hex_middle">动漫</div> 115 <div class="hex_bottom"></div> 116 </div> 117 <div class="hex"> 118 <div class="hex_top"></div> 119 <div class="hex_middle">邮箱</div> 120 <div class="hex_bottom"></div> 121 </div> 122 <div class="hex"> 123 <div class="hex_top"></div> 124 <div class="hex_middle">其他</div> 125 <div class="hex_bottom"></div> 126 </div> 127 <script type="text/javascript" src="js/jquery-1-8-3.js"></script> 128 <script type="text/javascript"> 129 $("div.hex").on("click",function(){ 130 $(this).addClass("hexActive").siblings().removeClass("hexActive"); 131 }); 132 </script> 133 </body> 134 </html>