使用者:Crowley666/畫六邊形
本文介紹如何做到:畫六邊形、排列六邊形、安排內部格式。
畫六邊形
主要有三種方法:邊框模擬法、旋轉法、路徑法。也可以用⬢模擬以及用圖片。
維基百科可以手寫style,也可以用<templatestyles src="Template:沙盒/???/styles.css" />
或將template偽裝成js來加載User空間的css文件。
邊框模擬法
1 2 優點是瀏覽器支持廣(誰還用IE?),缺點是六邊形本身不能擁有邊框。
旋轉法
1 2 缺點:不直觀、只支持正六邊形、瀏覽器支持問題、邊框只支持1px。
路徑法 clip-path
⬢法
缺點:沒有旋轉30度的版本、字體問題。
⬢
SVG法(維基不支持)
參考
排列六邊形
針對「有邊豎直」的六邊形,以行排列,偶數行具有預設的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;