活躍李的css箭頭與身體圖像背景？

我的目標是隱藏三角形下方的線條，以便在活動菜單上獲得此結果。在stackoverflow也有類似的問題，但這些解決方案並沒有解決我目前所遇到的問題。請幫我玩。謝謝！ FIDDLE here。活躍李的css箭頭與身體圖像背景？

body { 
 
    background: #1abc9c url(//dmypbau5frl9g.cloudfront.net/assets/homepage/banner--themeforest-342995208860d6c90b98134db089ef84.jpg); 
 
} 
 
ul { 
 
    width:100%; 
 
    border-bottom:3px solid red 
 
} 
 
li { 
 
    display:inline-block;padding:20px; 
 
} 
 
li a { 
 
    display:block;position:relative; 
 
} 
 
li.active a:after { 
 
    content:""; 
 
    width:15px; 
 
    height:15px; 
 
    position:absolute; 
 
    top:100%; 
 
    left:0; 
 
    right:0; 
 
    margin:12px auto 0; 
 
    border:solid red; 
 
    border-width:3px 3px 0 0; 
 
    -moz-transform:rotate(315deg); 
 
    -webkit-transform:rotate(315deg); 
 
    -ms-transform:rotate(315deg); 
 
}

<ul> 
 
    <li><a href="#">LINK1</a></li> 
 
    <li><a href="#">LINK2</a></li> 
 
    <li class="active"><a href="#">LINK3</a></li> 
 
    <li><a href="#">LINK4</a></li> 
 
    </ul>

來源

2015-04-05 jamez88

這個CSS代碼將修復：

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

您需要攜帶邊界到LI，並在前後內容的左側和右側切斷。爲了畫龍點睛，我還會在內容後帶上UL的邊框，以便在頁面上保持100％。

body { 
    background: #1abc9c url(//dmypbau5frl9g.cloudfront.net/assets/homepage/banner--themeforest-342995208860d6c90b98134db089ef84.jpg); 
} 

ul { 
    overflow: hidden; /* Clear float and hide ul:after content overflow */ 
    position: relative; /* Relative for ul:after content */ 
    width: 100%; 
} 

ul:after { 
    content: ""; 
    border-bottom: 3px solid red; 
    bottom: 0; 
    position: absolute; /* Now it will start after the last LI */ 
    width: 100%; 
} 

li {  
    float: left; 
    padding: 20px; 
    position: relative; 
} 

li:before, 
li:after { 
    content: ""; 
    border-bottom: 3px solid red;  
    bottom: 0; 
    position: absolute; 
    width: 50%; 
} 

li:before { 
    left: 0; 
} 

li:after { 
    right: 0; 
} 

li.active:before, 
li.active:after { 
    width: calc(50% - 8px); /* Transparent part of the arrow */ 
} 

li a {  
    display: block; 
    position: relative; 
} 

li.active a:after { 
    content: ""; 
    width: 15px; 
    height: 15px; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    margin: 12px auto 0; 
    border: solid red; 
    border-width: 3px 3px 0; 
    -moz-transform: rotate(315deg); 
    -webkit-transform: rotate(315deg); 
    -ms-transform: rotate(315deg); 
}

來源

2015-04-05 19:53:23

很好的答案，爲什麼這個工程會解釋一些話會讓它變得更好。 – Pevara 2015-04-05 20:00:27

謝謝，我會給代碼添加一些註釋 – 2015-04-05 20:04:33

不錯的@Ben！我會盡力實現這一點。我應該研究width：calc（），因爲這是我第一次聽到它：D – jamez88 2015-04-05 20:10:30

三角形的底部是從你的菜單ul財產border-bottom: red 3px solid;而不是從after元素。

您可以嘗試添加背景顏色接近頁面的顏色像這樣僞裝外觀：

li.active a:after { 
    background-color: rgb(28, 183, 152); 
}

下面是它如何會看起來像一個的jsfiddle：http://jsfiddle.net/AndrewL32/L786rqfs/3/

來源

2015-04-05 19:36:09

謝謝@安德魯，但我的背景是動態的。 – jamez88 2015-04-05 19:40:21

..而且我有漸變背景，所以我正在尋找其他解決方案。 – jamez88 2015-04-05 19:47:27

活躍李的css箭頭與身體圖像背景？

回答

相關問題