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>

里面有几个关键的长度和宽度：

  1. li的宽度，li的宽度由内部元素撑开。
  2. li的高度，多排六边形的情况下，li的高度与排与排之间的间隙有关。
  3. .hex的宽度，即六边形平行边之间的距离。
  4. .hex的高度，六边形对应顶点间的距离。
  5. .hexIn的高度和宽度同.hex。         

    .hexIn区域如图：

    .hex区域如图：

    li区域如图：

    根据以上的宽度和高度说明，以上数值都要满足一定的关系，直接说结论：

    假设需要平行边距离为w的六边形，每个六边形之间的间隔为m。

    那么：

    1. li的高度：0.866(w+m)
    2. .hex的宽度：w，高度：1.155w
    3. .hexIn同上
    4. 如果第一排有x个六边形，那么为实现相邻两排交错排列的效果，需要设置：li:nth(`x + x - 1`n + `x + 1`) { margin-left: 0.5(w+2m) }。比如第一排有6个，那么li:nth(11n+7) { ... }.

    3、实现效果图

     

     

posted @ 2022-06-30 15:17  yuwenjing  阅读(538)  评论(0)  编辑  收藏  举报