問題上添加倒三角的頂部邊框

添加到活動類的上邊框！[在這裏輸入的形象描述] [2]

我使用這個CSS規則：

.xxx a { 
    border-top: 3px solid #E1483F; 
} 
.xxx .active > a:after { 
    border-top: 12px solid #E1483F; 
}

但正如你所看到的，我沒有得到的三角加上項目（CSS）向下移動之前的位置。你能讓我知道如何解決這個問題嗎？

感謝

來源

2014-10-18 Mona Coder

你發佈一個錯誤的jsfiddle。 – 2014-10-18 03:38:23

您好pianoman99其實並沒有錯誤的小提琴，y必須重新調整結果面板的大小以查看導航，謝謝 – 2014-10-18 03:46:54

在該小提琴中看不到任何代碼。你只是添加一個'邊框頂部'。 – Harry 2014-10-18 03:54:56

你可以做到這樣的：

的jsfiddle - DEMO

.navbar-nav > li { 
    position: relative; 
    text-align: center; 
} 
.active:before { 
    content:" "; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 999; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 12px 12px 0 12px; 
    border-color: #E1483F transparent transparent transparent; 
}

來源

2014-10-18 03:54:16 Anonymous

謝謝瑪麗，這是完美的！ – 2014-10-18 03:55:54

問題上添加倒三角的頂部邊框

回答

相關問題