您当前的位置: 六边形
今天看到别人分享的六边形学习 自己也试着做了一下
原理：
图片旋转 transfrom：rotate（120deg）；溢出隐藏 overflow：hidden；
我们要用三层div来实现旋转效果
第一次 rotate（120deg） 第二次 rotate（-60deg） 第三次 rotate（-60deg）
此时 正好div归正 我们的图片放在第三层里面 第一层和第二层纯属是为了实现六边形的
图像剪切成六边形定有溢出的地方设置溢出隐藏 overflow：hidden
div的宽度必须满足4:5 不然得到的就不是六边形了
HTML 部分
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>六边形图片展示</title> 6 <link href="css/index.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <!-- section 部分 container 容器 -->10 <section class="container">11 <div class="conbox-1">12 <div class="conbox-2">13 <div class="conbox-3">14 <img src="images/a1.jpg">15 <div>风景</div>16 </div>17 </div>18 </div>19 20 <div class="conbox-1">21 <div class="conbox-2">22 <div class="conbox-3">23 <img src="images/a2.jpg">24 <div>风景</div>25 </div>26 </div>27 </div>28 29 <div class="conbox-1">30 <div class="conbox-2">31 <div class="conbox-3">32 <img src="images/a3.jpg">33 <div>风景</div>34 </div>35 </div>36 </div>37 38 <div class="conbox-1 margin-top margin-left">39 <div class="conbox-2">40 <div class="conbox-3">41 <img src="images/a4.jpg">42 <div>风景</div>43 </div>44 </div>45 </div>46 47 <div class="conbox-1 margin-top">48 <div class="conbox-2">49 <div class="conbox-3">50 <img src="images/a5.jpg">51 <div>风景</div>52 </div>53 </div>54 </div>55 56 </section>57 </body>58 </html>
CSS 部分
@charset "utf-8";* { margin:0; /* 外边距 */ padding:0; /* 内边距 */}body { background-color:#0F9; /* 背景颜色 */}.container { width:650px; /* 宽 */ height:430px; /* 高 */ margin:100px auto; /* 上外边距和下外边距100 左右边距自动 */}.conbox-1 { width:200px; height:250px; float:left; /* 左浮动 */ margin-left:10px; /* 左边距10 */ overflow:hidden; /* 溢出隐藏 */ transform:rotate(120deg); /* 改变外形 旋转120deg */}.conbox-2 { width:100%; height:100%; overflow:hidden; transform:rotate(-60deg);}.conbox-3 { width: 100%; height: 100%; overflow: hidden; transform:rotate(-60deg); position: relative; /* 位置 ： 相对的 */}.conbox-3 > div { /* >div 表示 div是.conbox-3的直接子选择器 */ width:100%; height:100%; position:absolute; /* 位置 ： 绝对的 */ top:0; left:0; opacity:0; /* opacity 不透明的 */ line-height:250px; /* 线高度 */ text-align:center; /* 文本居中 */ color:#0FF; cursor:pointer; /* 光标 ： 指针 */ background:url(../images/s.png); /* 背景图片 */ transition:opacity 0.3s; /* 过渡 ： 不透明度时间0.3s */}.conbox-3:hover > div { /* 当光标移入 不透明度改变为1 */ opacity:1;}.margin-top { margin-top:-70px;}.margin-left { margin-left:115px;}.clear{ clear: both;}此文到此结束
此文参考链接 http://doc.okbase.net/similar/archive/109640.html