跳至內容

使用者: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;