Css 创建具有对角对齐选项卡的菜单

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

问题是，出于兼容性原因，我不能使用CSS3。我发现了一个简单的解决方案，只使用jQuery rotate中的图像，但它会引起可访问性问题，所以我想避免它

使用CSS和一些JS最有效的方法是什么

谢谢你的帮助。

使用html。它得到广泛支持，易于使用。有关更多信息，请参阅。

嘿，现在您可以使用css3 transform:rotate进行此导航

像这样

Css

HTML

现场演示

升级的演示

---

给左边空白：-xxxx

如果不使用CSS3，则无法旋转文本。所有其他解决方案都将基于图像/画布。请尝试此方法。[[1]：基于图像就可以了，我只是想避免硬编码的解决方案。我已经尝试过类似的方法，尽管它使用CSS3，但我在设置等宽制表符时遇到了问题。@morgi现在你可以根据定义你的li边距了，就像这里的演示一样

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

<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>