html - 使用 CSS3 样式化导航菜单

Question

请看一下这个导航菜单

目前它看起来像下面

我想要实现的结果如下所示（我在 Photoshop 上制作的）

用 CSS3 可以得到这个结果吗？如果是，请帮助我。想不通，怎么得到这个结果

Answer 1

开始了

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

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

其次，我使用数据属性来显示数字的值，您可以使用非常少量的 javascript 动态更改数字，这将自动更改框中显示的数字 :-)

希望有帮助..

抱歉，我没发现你的悬停效果:-(

Answer 2

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

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