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。我認爲它可以完美地滿足您的需求，創建重新定位背景圖片以實現您要查找的顯示效果。