css3实现六边形列表

最近在做六边形列表，看到老外写的一个，感觉很不错。

https://github.com/web-tiki/responsive-grid-of-hexagons

demo：https://codepen.io/web-tiki/pen/HhCyd

这个可以容易的嵌入背景图片，只是会被放大些许。

优点是：可以自适应。

缺点是：需要手动在css代码例如设置每行有多少个六边形，然后调整布局。

我在这个基础上调整了下代码，以后用起来方便的。

使用方法：

1、嵌入css

<link href="css/hexagon.css" rel="stylesheet" type="text/css">

2、写入html（六边形角朝上）

<div style="width:90%; margin:0 auto; background-image:url(images/bg.jpg); background-size:cover;">
<ul class="hex-grid-vert col-vert-set">
<li><div><img src="images/01.jpg" /><h1>盾娘</h1><p>玛修·基列莱特，假想宝具疑似展开/人理之础</p></div></li>
<li><div><img src="images/02.jpg" /><h1>棉被</h1><p>阿尔托莉雅·潘德拉贡，誓约胜利之剑</p></div></li>
<li><div><img src="images/03.jpg" /><h1>Lily</h1><p>阿尔托莉雅·潘德拉贡，必胜黄金之剑</p></div></li>
<li><div><img src="images/13.jpg" /></div></li>
<li><div><img src="images/14.jpg" /></div></li>
<li><div><img src="images/15.jpg" /></div></li>
<li><a href="#"><img src="images/04.jpg" /><h1>红saber</h1><p>尼禄·克劳狄乌斯，童女讴歌的华丽帝政</p></a></li>
<li><a href="#"><img src="images/05.jpg" /><h1>红茶</h1><p>英灵卫宫，无限剑制</p></a></li>
<li><a href="#"><img src="images/06.jpg" /><h1>金闪闪</h1><p>吉尔伽美什，开天辟地乖离之星</p></a></li>
<li><div><img src="images/07.jpg" /><h1>大狗</h1><p>库·丘林，刺穿死棘之枪</p></div></li>
<li><div><img src="images/08.jpg" /><h1>伊丽莎白·巴托丽</h1><p>伊丽莎白·巴托丽，鲜血魔娘</p></div></li>
<li class="clr"></li>
<li><div><img src="images/09.jpg" /><h1>美杜莎</h1><p>美杜莎，骑英之缰绳</p></div></li>
<li class="clr"></li>
<li><div><img src="images/10.jpg" /><h1>幼帝</h1><p>亚历山大，初行的蹂躏制霸</p></div></li>
<li><div><img src="images/11.jpg" /><h1>圣女玛尔达</h1><p>圣女玛尔达，不觉爱的悲哀之龙啊</p></div></li>
<li><div><img src="images/12.jpg" /><h1>C妈</h1><p>美狄亚，万符必将破戒</p></div></li>
<li><div><img src="images/16.jpg" /><h1>贞德</h1><p>贞德，吾的神明在此</p></div></li>
</ul></div>

3、根据每行数量，修改css（六边形角朝上）

.col-vert-set li{
	width: 27.85714285714286%;/* =(100-spacing)/number */ 
	padding-bottom: 32.16760145166612%;/* =width/sin(60deg);appr width/0.866 */
}

其中，宽=（100-所有间距）/数量

padding-bootom=宽/sin(60)，sin(60deg)约等于0.866

这个时候看到的是这样的

4、根据设定，调整间距

.col-vert-set li:nth-child(3n+2) {
	margin: 0 1%;
}
.col-vert-set li:nth-child(6n+4) {
	margin-left: 0.5%;
}
.col-vert-set li:nth-child(6n+4), .col-vert-set li:nth-child(6n+5), .col-vert-set li:nth-child(6n+6) {
	margin-top: -6.9285714285%;
	margin-bottom: -6.9285714285%;
	-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.col-vert-set li:nth-child(6n+4):last-child, .col-vert-set li:nth-child(6n+5):last-child, .col-vert-set li:nth-child(6n+6):last-child {
	margin-bottom: 0%;
}

显示结果如下：

5、如果是六边形角朝左右

大体上差不多，html代码多嵌套了一个div，宽=（100-所有间距）/数量*sin(60deg)

最终效果如下：

6、其他

可以在某个位置不显示六边形，只要在代码里写入

<li class="clr"></li>

鼠标经过的时候，有遮罩并且带动画

总体而已，觉得是个很不错的六边形实现方式。

我整理的代码：http://download.csdn.net/detail/wuyt2008/9680379