图像<区域>有哪些合理的替代方案？地图？

Question

仍然是处理不规则导航菜单的最佳方法，还是有更好的方法？

我的导航菜单如下所示：

Answer 1

您可以使用标准导航标记：

<div id="nav">
    <ul>
        <li><a class="active" href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

然后进行 2D CSS 转换（围绕 Y 轴倾斜元素）：

#nav {
    -webkit-transform: skewY(-10deg);
    -moz-transform: skewY(-10deg);
    -ms-transform: skewY(-10deg);
    -o-transform: skewY(-10deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=1, M12=0,
        M21=-0.174532925, M22=1);
    transform: skewY(-10deg);    
}

请参阅此 fiddle 获取实例。有关浏览器支持信息，请参阅此。

如何编写 IE 过滤器

通过在 google 中输入以下内容将 -10 度转换为弧度：

-10 度转弧度

您将得到：

-10度=-0.174532925弧度

然后将值插入 M21。

为什么要使用此方法

1. 您担心页面加载时间，并且不希望再次对图像发出 HTTP 请求。
2. 标准导航标记具有更好的语义，特别是当您切换到 HTML5 并使用屏幕阅读器用来确定导航位置的 nav 元素时。

Answer 2

在没有看到任何代码或任何你实际想要完成的事情的情况下，我可以含糊地说，是的。您可以使用带有 id 列表项的列表，并手动将它们放置在您的页面上。

但同样，如果没有看到你想要完成什么，就很难说。