html - 傾斜ナビゲーション

Question

下の写真のように斜めのナビゲーションメニューを作ろうとしています。誰かがこれを作成するための最良の方法について何か意見を教えてもらえますか？

どんな助けでも大歓迎です！

Answer 1

最良の方法は、疑似要素を使用してエッジに三角形を作成することです。

フィドルをチェックしてください：http：//jsfiddle.net/HRWqq/

HTML：

<ul>
    <li><a href="#">Some Text</a></li>
    <li><a href="#">Some Text</a></li>
    <li><a href="#">Some Text</a></li>
    <li><a href="#">Some Text</a></li>
    <li><a href="#">Some Text</a></li>
</ul>​

CSS：

li {
    float: left;
    background: #ccc;
    margin-right: 50px;
}
li > a {
    text-decoration: none;
    display: block;
    position: relative;
    line-height: 40px;
    padding: 0 8px;
}
li > a:before {
    content: '';
    position: absolute;
    border: 20px solid #ccc;
    border-left-color: transparent;
    border-top-color: transparent;
    right: 100%;
    top: 0;
}
li > a:after {
    content: '';
    position: absolute;
    border: 20px solid #ccc;
    border-right-color: transparent;
    border-bottom-color: transparent;
    left: 100%;
    top: 0;
}





li:first-child > a {
    background: #aaa;
}
li:first-child > a:after {
    border-top-color: #aaa;
    border-left-color: #aaa;
}

li:last-child > a {
    background: #ddd;
}
li:last-child > a:before{
    border-right-color: #ddd;
    border-bottom-color: #ddd;
}
li:last-child > a:after {
    border: 0;
}

</ p>

Answer 2

画像マップを使用します。http://en.wikipedia.org/wiki/Image_map