倾斜导航

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

Answer 2

使用图像映射。 http://en.wikipedia.org/wiki/Image_map