css - 创建带有对角对齐选项卡的菜单

Question

我必须制作一个带有对角对齐标签的菜单。这就是我想要获得的：

问题是，出于兼容性原因，我不能使用 CSS3。我找到了一个仅使用图像的简单解决方案（使用 jQuery-rotate），但它引发了可访问性问题，所以我想避免它。

使用 CSS 和一点 JS 来做到这一点的最有效方法是什么？

谢谢你的帮助。

Answer 1

使用 html <map>。它得到广泛支持且易于使用。有关详细信息，请参阅http://w3schools.com/tags/tag_map.asp。

Answer 2

嘿，现在你可以使用css3 变换：旋转这个导航

像这样

CSS

    .navi{
    list-style:none;
        margin-top:40px;
    }

    .navi li{
    float:left;
        margin-left:-10px;
    }

    .navi li a{
    background:#000;
        padding:0px 40px;
        line-height:40px;
        display:block;
        color:#fff;
        -moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
    }

HTML

<ul class="navi">
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
</ul>

现场演示http://jsfiddle.net/fAkAe/2/

更新演示http://jsfiddle.net/fAkAe/3/

送给li margin-left:-xxxx