CSS证明了棘手的活动状态标签

Question

这是标签

的设计

我需要每个标签宽度相同。活动标签上的顶部绿色边框应位于左右边框上。

以下是我到目前为止编写的代码：http://jsbin.com/ricuzubo/1/edit

任何人都可以帮助我吗？

Answer 1

不是将border-right: none;应用于您的锚标记，而是删除该样式并向其添加margin-right: -10px。这样就可以了。 SEE THE DEMO和 THE CODE 供参考。

li a {
    border: 10px solid #ccc;
    margin-right: -10px;
}

li.active a {
    box-shadow: 0px -10px 0px green;
}

Answer 2

如果您可以使用CSS3删除边框并使用box-shadow添加此效果。

喜欢这个：

li.active a 
{
    box-shadow: 0px -10px 0px green;
}

这是一个FSfiddle：http://jsfiddle.net/NicoO/BcA6K/

Answer 3

我已经使用一些jQuery和CSS解决了你的问题here。

祝你好运！