CSS三角形箭頭菜單活動項目

我試圖在活動項目菜單上使用「純」CSS來進行向上箭頭。問題，我有一個奇怪的輸出。 here我的FIDDLE。你知道如何解決它嗎？CSS三角形箭頭菜單活動項目

#cssmenu li.active a { 
    /* display: inline; 
    border-bottom: 3px solid #00b8fd; 
    float: left; 
    margin: 0;*/ 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 

    border-bottom: 10px solid black; 
}

來源

2014-05-05 user979974

這是你所需要的 - HTTP：// WWW。 css3shapes.com/ – Dipak

這裏的問題是，箭頭是要一樣寬，它描述了li。做這樣的事情的最好方法是使用一個css僞元素。你所看到的是一樣的東西：

#cssmenu li.active a:before { 
    content: ' '; 
    width: 0px; 
    height: 10px; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 10px solid black; 
    display: inline-block; 
}

祝您好運！

更新小提琴：http://jsfiddle.net/XLfcY/

來源

2014-05-05 13:07:40

嗨drew_w，謝謝你的例證。我想知道是否有可能在項目下面放置箭頭而不是頂部？ – user979974

我加了，位置：絕對;底部：20像素;在#cssmenu li.active a：之前。聽起來很乾淨的解決方案？ – user979974

你可以使用它，或者你可以使用'position：relative'來代替 - 可以工作 - 僅僅取決於你在找什麼。相對的結果是：http://jsfiddle.net/XLfcY/1/ –

div{ 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid black; 
}

爲純CSS箭頭

來源

2014-05-05 13:07:16

嗨Arun，是否有可能使我的菜單/ jquery結構適應你的div解決方案？ – user979974

底部的箭頭，你問

position: relative; 
top: 60px;

這裏的小提琴鏈接 http://jsfiddle.net/suriyag/HwcTn/1/

來源

2014-05-05 13:25:16

好的，thx非常適合你的答案fidel castro – user979974

CSS三角形箭頭菜單活動項目

回答

相關問題