html - 图像的一些合理替代方案是什么地图？

Question

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

我的导航菜单如下所示：

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);    
}

请参阅此小提琴以获取实时示例。有关浏览器支持信息，请参阅此内容。

如何编写 IE 过滤器

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

-10 度到弧度

你会得到：

-10 度 = -0.174532925 弧度

然后将值插入M21。

你为什么要使用这种方法

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

Answer 2

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

但同样，如果没有看到你想要完成的事情，很难说。