用戶: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;