CSS-蜂窝状展示区域(多个六边形)的一种实现方式
示意图:
代码如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 ul { 10 margin: 0; 11 padding: 0; 12 } 13 ul { 14 list-style: none; 15 width: 560px; 16 margin: 100px auto; 17 } 18 li { 19 float: left; 20 margin: 0 5px; 21 height: 96px; 22 } 23 .hex { 24 overflow: hidden; 25 display: block; 26 width: 100px; 27 height: 116px; 28 transform: rotate(-60deg) skewY(30deg); 29 } 30 .hexIn { 31 background-color: #ccc; 32 display: block; 33 width: 100px; 34 height: 116px; 35 line-height: 116px; 36 text-align: center; 37 transform: skewY(-30deg) rotate(60deg); 38 } 39 li:nth-child(9n + 6) { 40 margin-left: 60px; 41 } 42 </style> 43 </head> 44 45 <body> 46 <ul> 47 <li> 48 <span class="hex"><span class="hexIn">1</span></span> 49 </li> 50 <li> 51 <span class="hex"><span class="hexIn">2</span></span> 52 </li> 53 <li> 54 <span class="hex"><span class="hexIn">3</span></span> 55 </li> 56 <li> 57 <span class="hex"><span class="hexIn">4</span></span> 58 </li> 59 <li> 60 <span class="hex"><span class="hexIn">5</span></span> 61 </li> 62 <li> 63 <span class="hex"><span class="hexIn">6</span></span> 64 </li> 65 <li> 66 <span class="hex"><span class="hexIn">7</span></span> 67 </li> 68 <li> 69 <span class="hex"><span class="hexIn">8</span></span> 70 </li> 71 <li> 72 <span class="hex"><span class="hexIn">9</span></span> 73 </li> 74 <li> 75 <span class="hex"><span class="hexIn">10</span></span> 76 </li> 77 <li> 78 <span class="hex"><span class="hexIn">11</span></span> 79 </li> 80 <li> 81 <span class="hex"><span class="hexIn">12</span></span> 82 </li> 83 <li> 84 <span class="hex"><span class="hexIn">13</span></span> 85 </li> 86 <li> 87 <span class="hex"><span class="hexIn">14</span></span> 88 </li> 89 <li> 90 <span class="hex"><span class="hexIn">15</span></span> 91 </li> 92 <li> 93 <span class="hex"><span class="hexIn">16</span></span> 94 </li> 95 <li> 96 <span class="hex"><span class="hexIn">17</span></span> 97 </li> 98 <li> 99 <span class="hex"><span class="hexIn">18</span></span> 100 </li> 101 <li> 102 <span class="hex"><span class="hexIn">19</span></span> 103 </li> 104 <li> 105 <span class="hex"><span class="hexIn">20</span></span> 106 </li> 107 </ul> 108 </body> 109 110 </html>
里面有几个关键的长度和宽度:
- li的宽度,li的宽度由内部元素撑开。
- li的高度,多排六边形的情况下,li的高度与排与排之间的间隙有关。
- .hex的宽度,即六边形平行边之间的距离。
- .hex的高度,六边形对应顶点间的距离。
- .hexIn的高度和宽度同.hex。
.hexIn区域如图:
.hex区域如图:
li区域如图:
根据以上的宽度和高度说明,以上数值都要满足一定的关系,直接说结论:
假设需要平行边距离为w的六边形,每个六边形之间的间隔为m。
那么:
- li的高度:0.866(w+m)
- .hex的宽度:w,高度:1.155w
- .hexIn同上
- 如果第一排有x个六边形,那么为实现相邻两排交错排列的效果,需要设置:li:nth(`x + x - 1`n + `x + 1`) { margin-left: 0.5(w+2m) }。比如第一排有6个,那么li:nth(11n+7) { ... }.
3、实现效果图