樣式導航菜單

目前，它看起來像下面

enter image description here

我試圖實現的，如下圖所示的結果（我做了這個在Photoshop中）

enter image description here

這有可能得到這個結果與CSS3？如果是，請幫助我。不知道，如何得到這個結果

2012-06-03 heron

是5和10顯示爲文本字符？我想你將不得不作出的背景圖像，使得三角形包含 – Hidde

@Hidde他們將成爲文本 – heron

爲什麼不使用':: before'和/或':: a fter'僞元素顯示文本，因爲你已經在使用它們了？ –

在這裏，我們去

我已經使用CSS僞元素，以顯示他們，如果你願意，你可以用正常的元素取代，但是這不會是一個非常明智的選擇。

其次我已經使用的數據屬性，以顯示數的值，可以動態地改變數目與JavaScript的非常小的量，這將自動地改變在框中顯示的數字:-)

希望幫助..

對不起，我沒能找出你的懸停效果:-(

2012-06-03 15:45:03 ShrekOverflow

我無法找到你指定的懸停事件的邊界，但我會使綠線的部分div，然後使用三角形作爲圖像在div裏面。

2012-06-03 11:55:31 Neograph734

Thx快速回復，但。我無法弄清楚的部分是，如何用三角形得到這個工作:)） – heron

你可以用css繪製形狀，但這很棘手。在我的例子中，我使用了一個方形圖像。只需將該鏈接替換爲三角形圖像;） – Neograph734

方形圖像在哪裏？）） – heron

樣式導航​​菜單