css - 带有斜边边框的水平导航 - 如何处理 "Active"状态？

Question

我正在寻找一些集思广益的帮助。

我正在编写一个由设计师组合在一起的布局，并试图想出一种方法来处理具有倾斜边缘的水平导航，并在选择链接时从蓝色背景变为白色背景。

我实际上只包含一个屏幕截图。这实际上是一个选项卡式内容区域的导航。屏幕截图的上半部分显示了选择第一个选项卡时的样子。屏幕截图的下半部分显示了所选的第二个选项卡。

http://i.stack.imgur.com/P34yI.gif

所以我的问题来自于 HTML 元素是矩形，而不是有 Angular 边的矩形。我将带有阴影的倾斜边缘保存为 CSS 背景，并且效果很好，直到我意识到每个链接都可以变成白色并且 BG 图像中嵌入了一些下一个链接以给出 Angular 错觉，并且因此，最左边的链接需要与中间链接和最右边的链接等不同的背景......

我可以为每个链接分配一个唯一的类/ID(或使用第 n 个子链接)，但我想保持解决方案的灵 active ，以便将来可以添加另一个链接/标签。

我很好奇是否有人对如何通过可能使用 CSS3/HTML5/或一些透明的 PNG 和负边距或相对定位来创建这种外观有任何想法？

我不是要代码，也不是要你为我做我的工作 :) 我只是在寻找想法 - 只是一些社区头脑 Storm 。如果有人有任何建议，请告诉我，这可能会引导我找到解决方案。

谢谢!!

Answer 1

假设您正在为菜单使用“ul > li > a”结构，我会使用两个成 Angular 背景(右和左……右边的带阴影大约 27 像素，左边大约 22 像素)。将左 Angular 应用于 <li> , 和 <a> 的右上角.这将使每个列表项的背景加倍，因此您应该在 <li> 的每一侧使用负边距。拉它的 sibling 重叠。然后使用 z-index 确保悬停或突出显示菜单项显示在其他菜单项之上。我在两侧添加了额外的 30px 的填充以在文本周围创建额外的空间:

li {
    margin-right: -27px;
    margin-left: -22px;
    padding-left: 52px;
    position: relative;
    background: url(leftcorner.jpg) left top no-repeat;
    background-color: #3aa1cc
}

li a {
    padding-right: 57px;
    background: url(rightcorner.jpg) right top
}

li:hover {z-index: 5; background: url(leftcorner-hover.jpg) left top no-repeat}
li:hover a {background: url(rightcorner-hover.jpg) left top no-repeat}

我还没有测试过这个，但我认为它应该可以工作......可能需要一些额外的调整。

此解决方案不包括微妙的内部阴影...要做到这一点，您必须在 <li> 上使用 1px 重复渐变背景。然后为两个 Angular 背景图像使用 :before 和 :after 伪元素。

此外，在我的代码中，我放置了两个单独的 .jpg(正常和悬停)，但实际上您应该使用 sprite 和背景位置，以便在加载悬停状态图像时没有闪光。