.hex_top_triangle{width:0;border-bottom:30pxsolid#6C6;border-left:52pxsolidtransparent;border-right:52pxsolidtransparent;}.hex_center_rect{width:104px;height:60px;background-color:#6C6;}.hex_bottom_triangle{width:0;border-top:30pxsolid#6C6;border-left:52pxsolidtransparent;border-right:52pxsolidtransparent;}.float{float:left;margin-left:1px;margin-bottom:-29px;}.row_even{clear:left;margin-left:52px;/*margin-top:30px;*/}.hex_even{float:left;margin-left:1px;}

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><linkhref="hex.css"type="text/css"rel="stylesheet"/><body><div><divclass="float"><divclass="hex_top_triangle"></div><divclass="hex_center_rect"></div><divclass="hex_bottom_triangle"></div></div><divclass="float"><divclass="hex_top_triangle"></div><divclass="hex_center_rect"></div><divclass="hex_bottom_triangle"></div></div><divclass="float"><divclass="hex_top_triangle"></div><divclass="hex_center_rect"></div><divclass="hex_bottom_triangle"></div></div></div><divclass="row_even"><divclass="hex_even"><divclass="hex_top_triangle"></div><divclass="hex_center_rect"></div><divclass="hex_bottom_triangle"></div></div><divclass="hex_even"><divclass="hex_top_triangle"></div><divclass="hex_center_rect"></div><divclass="hex_bottom_triangle"></div></div></div></body></html>

对蜂窝状的排版结构的模仿半成品，从简单的规律演化出缤纷的效果来。深入了对css的理解，可以做出简单的六边形之后难点就变成了，如何将这些简单的六边形排版，我的第一感是将一个六边形放入div中然后通过变形什么的实现，可惜自己思考力不够，中途放弃，参考成熟的代码通过div的排列，clear:left 清除左边的浮动，实现了浮动元素的换行，另外margin-bottom:-30px;为了使六边形向上的尖角插入，的二行整体左移对应的像素。最后来个黑科技一点的unicode 编码中有六边形这个字符

<span>&#x2B22;&#x2B22;&#x2B22;</span>

以上代码可以在页面上出现三个字符关于大小，字符间距如果更好的调教的话也会出现瑰丽的画面。还有很多其他的很好玩的特殊字符可以参看https://artwc.com/tl/unifont/用法和相关的知识。