CSS-蜂窝状展示区域（多个六边形）的一种实现方式
程序员文章站
2022-05-14 11:04:03
网上已经有很多关于正六边形的CSS画法，主要是利用一个矩形和前后的两个三角形组合而成。 之前在看四维图新的官网的时候，发现了一种六边形的画法，比较适合多排六边形组合成蜂窝状的展示区域（注：四维图新现在改成了上面说的那种画法了）。 示意图： 1、HTML结构 每个li里包着.hex和.hexIn。.h ......
网上已经有很多关于正六边形的css画法，主要是利用一个矩形和前后的两个三角形组合而成。
之前在看四维图新的官网的时候，发现了一种六边形的画法，比较适合多排六边形组合成蜂窝状的展示区域（注：四维图新现在改成了上面说的那种画法了）。
示意图：
1、html结构
<body>
<ul>
<li>
<span class="hex"><span class="hexin">1</span></span>
</li>
<li>
<span class="hex"><span class="hexin">2</span></span>
</li>
<li>
<span class="hex"><span class="hexin">3</span></span>
</li>
<li>
<span class="hex"><span class="hexin">4</span></span>
</li>
<li>
<span class="hex"><span class="hexin">5</span></span>
</li>
<li>
<span class="hex"><span class="hexin">6</span></span>
</li>
<li>
<span class="hex"><span class="hexin">7</span></span>
</li>
<li>
<span class="hex"><span class="hexin">8</span></span>
</li>
<li>
<span class="hex"><span class="hexin">9</span></span>
</li>
<li>
<span class="hex"><span class="hexin">10</span></span>
</li>
<li>
<span class="hex"><span class="hexin">11</span></span>
</li>
<li>
<span class="hex"><span class="hexin">12</span></span>
</li>
<li>
<span class="hex"><span class="hexin">13</span></span>
</li>
<li>
<span class="hex"><span class="hexin">14</span></span>
</li>
<li>
<span class="hex"><span class="hexin">15</span></span>
</li>
<li>
<span class="hex"><span class="hexin">16</span></span>
</li>
<li>
<span class="hex"><span class="hexin">17</span></span>
</li>
<li>
<span class="hex"><span class="hexin">18</span></span>
</li>
<li>
<span class="hex"><span class="hexin">19</span></span>
</li>
<li>
<span class="hex"><span class="hexin">20</span></span>
</li>
</ul>
</body>
每个li里包着.hex和.hexin。.hexin是内容区，.hex是一个菱形切割区，将.hexin切割成六边形。具体看css。
2、css
ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 560px;
margin: 100px auto;
}
li {
float: left;
margin: 0 5px;
height: 96px;
}
.hex {
overflow: hidden;
display: block;
width: 100px;
height: 116px;
transform: rotate(-60deg) skewy(30deg);
}
.hexin {
background-color: #ccc;
display: block;
width: 100px;
height: 116px;
line-height: 116px;
text-align: center;
transform: skewy(-30deg) rotate(60deg);
}
li:nth-child(9n + 6) {
margin-left: 60px;
}
里面有几个关键的长度和宽度：
- 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(x+2m) }。比如第一排有6个，那么li:nth(11n+7) { ... }.
3、实现效果图