css - タブを斜めに並べたメニューを作成する

Question

タブを斜めに並べたメニューを作成する必要があります。これは私が取得したいものです:

問題は、互換性の理由から CSS3 を使用できないことです。画像のみ（jQuery-rotateを使用）を使用した簡単な解決策を見つけましたが、アクセシビリティの問題が発生するため、避けたいと思います。

CSS と少しの JS を使用してこれを行う最も効率的な方法は何でしょうか?

ご協力いただきありがとうございます。

Answer 1

ねえ今あなたは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

Answer 2

html を使用し<map>ます。広く支持されており、使いやすいです。詳細については、 http://w3schools.com/tags/tag_map.aspを参照してください。