跳转到内容

用户:Crowley666/画六边形

维基百科,自由的百科全书

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

画六边形

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

维基百科可以手写style,也可以用<templatestyles src="Template:沙盒/???/styles.css" />或将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;