倾斜导航

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

​