使用CSS3设置导航菜单

Question

请查看this nav menu

目前看起来如下

我想要实现的目标，结果如下（我在Photoshop上制作）

用CSS3可以得到这个结果吗？如果是的话请帮助我。无法弄清楚，如何得到这个结果

Answer 1

我们走了

http://jsfiddle.net/DBzSD/11/

我已经使用CSS伪元素来显示它们，如果你愿意，可以用普通元素替换，但这不是一个非常明智的选择。

其次我使用data-attribute来显示数字的值，你可以用非常少量的javascript动态地改变数字，这将自动改变框中显示的数字： - ）

希望有所帮助..

抱歉，我没有找到你的悬停效果:-(

Answer 2

我找不到你在悬停事件中指定边框的位置，但我会将div的绿线部分设为一部分，然后将三角形用作div内的图像。

看看这个小提琴http://jsfiddle.net/Neograph734/DBzSD/8/