集裝箱外的CSS背景圖像

Question

我無法使用我的worpdress/bootstrap導航來突出顯示當前頁面。

我試圖找到最好的解決方法，這裏是對我的方法了，但不工作

鏈路
• 化妝底邊框
• 有一個保證金或填充或任何類型的容器上的空間，並在底部添加背景圖像

不幸的是，圖像將不會顯示一旦它應該結束搭上邊界。

你有任何快速修復或其他方法嗎？

也許我想，以展開容器，是要解決這兩個鏈接和容器高度，並讓它們放在我多麼希望...

Answer 1

三角必須作爲絕對塊。它可以使用：之後。

也爲三角形，你可以使用CSS（沒有圖像）

ul{ 
    list-style:none; 
} 
li{ 
    display: inline-box; 
    width: 50px; 
    padding: 20px; 
    float: left; 
} 
.active{ 
    position: relative; 
    border-bottom: 3px solid red; 
} 
/*triangle absolute position and centred*/ 
.active:after{ 
    content:""; 
    position: absolute; 
    width: 0; 
    height: 0; 
    left: 50%; 
    bottom: -10px; 
    margin-left: -10px; 
    border-style: solid; 
    border-width: 10px 10px 0 10px; 
    border-color: #ff0000 transparent transparent  transparent; 
} 

https://codepen.io/flinius/pen/XgyLba