對齊六邊形導航

Question

我奮力這些六邊形定位彼此相鄰的3條線，下面是我試圖操縱http://goo.gl/xpHmw

效果我想實現

http://www.queness.com/resources/images/13901.gif

頁面

非常感謝您的任何幫助和幫助。

Answer 1

實現它可能有很多方法。我的解決方案可能會將六邊形包裹在相對定位的容器中，將所有六邊形分配一個position: absolute，並用「左」和「頂」手動將它們分別手動定位。

我已經爲您更好地理解了代碼。 http://codepen.io/nobitagit/pen/ojvue

PS - 接下來你問你最好摘要jsfiddle.net您的問題或codepen了提問時間，以便其他人可能會發現更容易回答你這個問題+解決方案將在那裏給別人看在將來。

Answer 2

好吧，我剛剛在家裏檢查了你的網站。

這不是在CSS中很容易做到的事情，因爲它不適合矩形或CSS等「塊」使用。

我有一些建議。也許它不能「回答」你的問題，但它會給你一個好的開始。

Div標籤不具有語義值，在這方面它們是「空的」。在這種情況下，您在無序列表<ul>中使用了多個div標籤來創建六邊形的背景。這很好，但我會推薦：

• 徹底刪除div。無序列表真的不應該有div。這是一個「無序」列表。我要麼使用獨家或更好的div：
• 使用無序列表並創建每個六邊形作爲背景。一個盒子可容納 - > 1個六邊形。六邊形不能縮放。沒有理由爲頂部/底部設置單獨的div。

您不必使用絕對定位。你只需要有一些這些六邊形重疊。對於第二排六邊形，您可以使用負邊距來抵消並將它們放置在正確的位置。使用.png作爲角落的透明度！

僞溶液：

• 每個六邊形佔用的正方形。
• 如巴紐在Photoshop中創建六角背景
• 保持在每一個<li>和它們漂浮在<ul> - >不使用的div
• 使用負上邊距第二排重疊成的裂縫其他六邊形。

祝你好運。發佈最新進展。我會進一步幫助你;但我無法爲您提供解決方案。