css导航菜单

Question

我正在尝试制作导航菜单而不使用任何CSS图像。但我不知道如何在每个菜单项的末尾有那些三角形边框线。以下图片可以让我的想法更加清晰：

任何好的CSS或JQuery都将是一个很棒的帮助！

非常感谢！

Answer 1

我已经使用此链接在CSS中创建三角形。这可能是一个很好的起点。

http://jonrohan.me/guide/css/creating-triangles-in-css/

Answer 2

本网站是您可以通过CSS创建的各种形状的绝佳示例。希望这可以帮助！

http://css-tricks.com/examples/ShapesOfCSS/

例如，您可以创建一种“雪佛龙”与下面的CSS

#chevron { 
    position: relative; 
    text-align: center; 
    padding: 12px; 
    margin-bottom: 6px; 
    height: 60px; 
    width: 200px; 
} 

#chevron:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 51%; 
    background: red; 
    -webkit-transform: skew(0deg, 6deg); 
    -moz-transform: skew(0deg, 6deg); 
    -ms-transform: skew(0deg, 6deg); 
    -o-transform: skew(0deg, 6deg); 
    transform: skew(0deg, 6deg); 
} 
#chevron:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    height: 100%; 
    width: 50%; 
    background: red; 
    -webkit-transform: skew(0deg, -6deg); 
    -moz-transform: skew(0deg, -6deg); 
    -ms-transform: skew(0deg, -6deg); 
    -o-transform: skew(0deg, -6deg); 
    transform: skew(0deg, -6deg); 
}​ 

当然，你可以根据需要旋转格。

Answer 3

你将有一个很难使这些多边形没有图像。退房CSS Sprites。我认为它可以完美地满足您的需求，创建重新定位背景图片以实现您要查找的显示效果。