用户:Crowley666/画六边形

本文介绍如何做到：画六边形、排列六边形、安排内部格式。

画六边形

主要有三种方法：边框模拟法、旋转法、路径法。也可以用⬢模拟以及用图片。

维基百科可以手写style，也可以用或将template伪装成js来加载User空间的css文件。

边框模拟法

1 2 优点是浏览器支持广（谁还用IE？），缺点是六边形本身不能拥有边框。

旋转法

1 2 缺点：不直观、只支持正六边形、浏览器支持问题、边框只支持1px。

路径法 clip-path

1 2 3 4 缺点：浏览器支持。

⬢法

缺点：没有旋转30度的版本、字体问题。

⬢

SVG法（维基不支持）

1

参考

mozilla clippy

排列六边形

针对“有边竖直”的六边形，以行排列，偶数行具有预设的left以与奇数行错开。

针对“有边水平”的六边形，仍以行排列，每行偶数编号的六边形具有预设的top。

为以行排列，每个六边形带有float:left，而每行带有clear:left。

为防止页面过窄导致排列完全错乱，在外面套一个<div style="width:100%; max-height:400px; overflow:auto;"></div>，当高度不足时会自动缩小，当尺寸超出时则会显示滚动条。

安排内部格式

在六边形的中心div设置display: flex; justify-content: center; align-items: center; text-align: center;以使其中内容居中显示。欲改变字号，使用font-size:0.8em;