帶有切口凹槽的CSS導航作爲標記

我知道我在之前的某個地方看到過這一點，但我試圖創建一個帶有標記的黑色固定導航欄，該標記是透明切出的三角形。我需要幫助讓三角形切出對背景透明，所以當您滾動頁面時，您可以看到下面的內容：帶有切口凹槽的CSS導航作爲標記

我有一個帶有javascript的標準列表/錨定導航來移動

<div class="navbar"> 
<ul> 
    <li class="current"><a>home</a></li> 
    <li><a>products</a></li> 
    <li><a>services</a></li> 
    <li><a>contact us</a></li> 
</ul> 
</div>

與下面的CSS樣式：根據頁面部分.current類

.navbar { 
    width: 100%; 
    position: fixed; 
    background: black; 
    float: left; 
} 

ul, li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    float: left; 
} 


a { 
    padding: 10px 20px 20px; 
} 

.current a { 
    background: transparent url('../img/wedge-red.png') center bottom no-repeat;    
}

我能想到做到這一點的唯一方法是對UL兩側添加額外的div和分配背景給他們，然後使用透明png與摳圖作爲li a的背景。

有沒有辦法做到這一點，而不是像這樣變得很醜陋，並添加額外的div？

來源

2013-01-23 magi182

這就是我最終的結果 - 擴展邊界並用overflow：hidden; （有點哈克，但它的工作原理，並且不添加元素到DOM）：

.navbar { 
     width: 100%; 
     height: 60px; 
     position: fixed; 
     overflow: hidden; 
    } 


    ul { 
     border-left: solid black 2000px; 
     border-right: solid black 2000px; 
     position: absolute; 
     top: 0; 
     left: 50%; 
     margin-left: -2000px; 
    }

以上工作很好地爲我的目的，並以快速響應環境的行爲。

這個頁面上的其他答案，使用：之前和之後：僞元素不適用於我的目的。它最終變得太挑剔了，僞元素不能正確對齊，並且在瀏覽器窗口重新調整大小時，一直保持封裝到下一行。建議的解決方案適用於固定寬度的元素，而不是原始問題中指定的百分比。

來源

2013-01-25 21:30:45 magi182

嘗試CSS僞元素！

在DOM中的現有元素之前和之後添加2個免費的DOM元素。理想的情況下，當你不想添加東西到你的標記來滿足樣式需求。

CSS標記

.item:before { 
    content:""; 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    background-color: silver; 
} 
.item:after { 
    content:""; 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    background-color: gray; 
}

HTML

<div class="item">Content</div>

檢查這個JSFiddle了演示。

確保你設置了內容：「」和顯示：塊爲了看到它們。

來源

2013-01-24 00:03:02

如果你將這個與CSS形狀相結合http://css-tricks.com/examples/ShapesOfCSS/你甚至不需要圖像 – Pevara

好的加法！ @PeterVR –

謝謝，是的，這是一般的想法。儘管當你使用百分比寬度時，對於：before和after之後的僞元素的計算有點奇怪。 [見這裏]（http://jsfiddle.net/6GeCK/10/）用百分比寬度進行工作演示... – magi182

帶有切口凹槽的CSS導航作爲標記

回答

相關問題