样式导航菜单

目前，它看起来像下面

enter image description here

我试图实现的，如下图所示的结果（我做了这个在Photoshop中）

enter image description here

这有可能得到这个结果与CSS3？如果是，请帮助我。不知道，如何得到这个结果

2012-06-03 heron

是5和10显示为文本字符？我想你将不得不作出的背景图像，使得三角形包含 – Hidde

@Hidde他们将成为文本 – heron

为什么不使用':: before'和/或':: a fter'伪元素显示文本，因为你已经在使用它们了？ –

在这里，我们去

我已经使用CSS伪元素，以显示他们，如果你愿意，你可以用正常的元素取代，但是这不会是一个非常明智的选择。

其次我已经使用的数据属性，以显示数的值，可以动态地改变数目与JavaScript的非常小的量，这将自动地改变在框中显示的数字:-)

希望帮助..

对不起，我没能找出你的悬停效果:-(

2012-06-03 15:45:03 ShrekOverflow

我无法找到你指定的悬停事件的边界，但我会使绿线的部分div，然后使用三角形作为图像在div里面。

2012-06-03 11:55:31 Neograph734

Thx快速回复，但。我无法弄清楚的部分是，如何用三角形得到这个工作:)） – heron

你可以用css绘制形状，但这很棘手。在我的例子中，我使用了一个方形图像。只需将该链接替换为三角形图像;） – Neograph734

方形图像在哪里？）） – heron

样式导航​​菜单