对齐六边形导航

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
• 使用负上边距第二排重叠成的裂缝其他六边形。

祝你好运。发布最新进展。我会进一步帮助你;但我无法为您提供解决方案。