完全靈活的HTML/CSS「透明」導航箭頭（見例）

Sample of What I'm trying to do...完全靈活的HTML/CSS「透明」導航箭頭（見例）

所以，我的老闆非常喜歡嚮導導航我已經建立了這個演示頁面（上圖）的風格。但是，當我構建它時，該方法有點靜態。我的意思是，它不能很好地延伸到5或6或10個嚮導步驟。但是，我需要將它擴展到那些自然的步驟。

我可以得到一些關於如何修改CSS代碼的建議，以便它更靈活地工作嗎？我花了幾個小時玩它，結果令人不滿。

2012-10-15 Mike Earley

您有任何瀏覽器需求？ –

IE8 +，目前的Chrome/Firefox/Safari。 –

它使用border S和僞元素是可能的：

.selected:before, .selected:after { 
    position: absolute; 
    top: 0; 
    content: ""; 
    border-top: 20px solid rgba(0, 0, 0, 0.5); 
    border-bottom: 20px solid rgba(0, 0, 0, 0.5); 
    border-left: none; 
    border-right: 20px solid transparent; 
} 
.selected:before { 
    left: 0; 
} 
.selected:after { 
    right: 0; 
    border-right: none; 
    border-left: 20px solid transparent; 
}

Demo（經測試，在Chrome和Firefox）

你會發現我用SASS的例子。這樣，如果您有three或12，則只需在一個位置更改一個變量（$wizard-steps），並且它會計算所有其他值以保持其爲全寬（並且流體！）。如果需要動態的話，這也可以用Javascript完成。

來源

2012-10-15 15:04:33 bookcasey

真棒，我會給這個旋轉。我不能使用sass b/c其他開發人員不使用它，但我絕對讚賞這個包含 - 我將它用於所有我自己的東西，並希望能夠繼續使用它... –

這是一個PHP驅動的網站，順便說一句。 –

完全靈活的HTML/CSS「透明」導航箭頭（見例）

回答

相關問題