对于我的生活，我无法弄清楚：你如何创建一个CSS倾斜标签菜单？

Question

这样的事情：

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

但是...

• 整个标签形状应该是可点击的，包括所有四个角。在CSSPlay示例中，在“Longer Item Three”的右上角启动鼠标并将其直接向下移动，以便通过将鼠标悬停在“Four”的左下角来结束。正如您所看到的，“Longer Item Three”的右上角不会改变背景颜色，而且在“Four”的左下角是不可点击的。我想要的效果是任何一个角应该是活动的/可点击的，具体取决于你悬停在哪个标签/形状上。 每个标签应该彼此直接相邻，每个标签之间有一条灰色的1px倾斜分隔线，之间没有空白区域

• 尽可能小的膨胀，尽可能语义。 CSSPlay示例包含一堆非语义标记。

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

• 需要CSS2才能支持更多浏览器

有谁知道怎么做？永恒的感激，将成为你的！是我要求的可能吗？

Answer 1

当接近CSS的可能范围时，你会遇到很多权衡，你必须选择最适合你情况的权衡。

非矩形链接仅适用于：

• CSS变换 - 只能在 支持CSS3的浏览器（IE9 Beta; Opera，Webkit和Firefox 最新的化身。

• 图片地图 - 不适合SEO或 代码整洁/可扩展性。

• 很多额外的加价 - 好吧，你已经 见过Stu Nichols解决方案。

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

http://jsfiddle.net/prfez/

在这个特定的解决方案中，你不能在导航后面有一个图像背景，因为“边距”是一个遮住渐变的矩形角的单个图像精灵。

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

优势在于html正是您对导航的期望。

请注意，ul渐变背景应替换为图像背景，以便在IE上使用。我只在Chrome上测试过。