箭頭指示CSS或以其他方式

我注意到，許多網站表明您通過使用像這樣的網頁或標籤：箭頭指示CSS或以其他方式

enter image description here

正如你可以看到，有一個小箭頭，以表示頁碼。這怎麼可以使用純CSS完成，或者大多數網站使用div背景圖像來設置使用background-position屬性的位置？看起來這是一種相當常見的技術，所以前面提到的似乎不太可能。

您可以看到其他示例here和here。如果解決方案同時進行水平和垂直旋轉，這將是很好的。

任何幫助將不勝感激，在此先感謝！

來源

2012-05-10 jacktheripper

嗯，'背景圖像'。是。 – VisioN

你可以爲'li'（或'div'或任何* current *標記的元素）分配兩個css類;一個是常規風格，另一個是你設置背景圖像或你喜歡的任何裝飾。 – MilkyWayJoe

也許這可以幫助：http：// css-tricks。com/snippets/css/css-triangle/ – undefined

如果你想通過CSS3創建這個網站，最近有一個網站發佈了，它爲你提供了你需要的CSS。

看一看：http://cssarrowplease.com/

如果您雖然尋找一個跨瀏覽器的解決方案，這是值得考慮的背景圖像按照前文的答案:)

來源

2012-05-10 13:48:13 digitalclubb

偉大的鏈接！酷演示:) – mtk

箭頭幾乎總是一個圖像，但這通常都是用CSS類完成的。

在CSS

.menu { 
Font: whatever; 
Background:url("image/parallel.PNG"); 
} 
.current { 
Background:URL("image/arrow.PNG"); 
}

和HTML的例子

<div class="menu">home</div> 
<div class="menu current">about</div>

這將給兩個菜單項的字體，但只有一個得到箭頭背景你也可以把所有的這些在一個容器中，將樣式應用於樣式中的所有子元素，然後只需將class =「current」添加到當前頁面。本頁 http://dynamicinteractions.com/home

查看源代碼，請原諒我的手機自動修正帽各地的代碼。

來源

2012-05-10 13:45:34

感謝您的回答，它如何在這樣的例子中工作：http://dribbble.com/shots/553791-Web-App-UI?list=tags&tag=ui – jacktheripper

這是一個使用JavaScript的彈出式菜單。可以用CSS完成，但使用JavaScript更容易。 –

如果你想要一個純CSS解決方案，可以這樣做http://jsfiddle.net/darkajax/hGmxP/使用:after僞元素

來源

2012-05-10 13:49:34 DarkAjax

您也可以使用css邊框來完成此操作。如果你有以下結構

<div class="menu">home</div> 
<div class="menu current">about</div> 
<div class="menu">Contact</div>

然後你就可以使用下面的CSS來畫一個講話泡沫或活動菜單下的箭頭

.current:after { 
    content: ''; 
    position: absolute; 

    width: 0; 
    height: 0; 

    border: 15px solid; 
    border-top-color: #292929; 

    top: 100%; 
    left: 50%; 
    margin-left: -15px; /* adjust for border width */ 
}

這是一個偉大的教程解釋技術http://net.tutsplus.com/tutorials/html-css-techniques/css-refreshers-borders/

來源

2012-05-10 13:53:16

箭頭指示CSS或以其他方式

回答

相關問題