css - 对于我的生活，我无法弄清楚 : How do you create a CSS slanted tab menu?

Question

像这样:

http://www.cssplay.co.uk/menus/slanty.html

但是……

• 整个选项卡形状应该是可点击的，包括所有四个 Angular 。在 CSSPlay 示例中，将鼠标从“Longer Item Three”的右上角开始，然后将其直接向下移动，最后将鼠标悬停在“Longer Item Three”的左下角。如您所见，“Longer Item Three”的右上角没有改变背景颜色并且不可点击，而“Four”的左下角是。我想要的效果是，根据您悬停在哪个选项卡/形状上，任一 Angular 都应该处于事件状态/可点击状态。每个选项卡应该彼此直接相邻，每个选项卡之间有一条灰色的 1px 倾斜分隔线，之间没有空白

• 尽可能少臃肿，尽可能语义化。 CSSPlay 示例有一堆非语义标签。

• 我想为每个选项卡使用不同的颜色渐变图像背景，例如。第一个选项卡是红色渐变，第二个是蓝色渐变。

• 需要是 CSS2 以支持更大范围的浏览器

有人知道吗？永恒的感激，将是你的!我要求的是可能的吗？

Answer 1

当接近 CSS 的可能性极限时，您会遇到很多权衡取舍，您必须选择最适合您情况的权衡取舍。

非矩形链接仅适用于:

• CSS 转换 - 仅适用于支持 CSS3 的浏览器(IE9 Beta；Opera、Webkit 和 Firefox 在他们的最新版本。

• 图像映射 - 不利于 SEO 或代码整洁度/可扩展性。

• 很多额外的标记 - 嗯，你已经见过 Stu Nichols 解决方案。

在这里，我快速模拟了一个我认为最适合您的特定解决方案:

http://jsfiddle.net/prfez/

在这个特殊的解决方案中，你不能在导航后面有图像背景，因为“边距”是一个单一的图像 Sprite ，它掩盖了渐变的矩形 Angular 。

您也不能在背景上应用悬停效果，因为背景应用在 ul 而不是 li 上。

优点是 html 正是您对导航的期望。

请注意，ul 渐变背景应该替换为图像背景，以便它在 IE 上工作。而且我只在 Chrome 上测试过。