2

我正在尝试制作一个带有倾斜形状的导航菜单，如下图所示。有人可以就创建这个的最佳方式给我任何意见吗？

任何帮助将不胜感激！

倾斜导航

4

2 回答 2

5

最好的方法是使用伪元素在边缘创建三角形。

查看小提琴：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>

于 2012-05-25T15:21:09.217 回答
1

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

于 2012-05-25T15:21:48.637 回答