這個帶有三角形的CSS活動菜單樣式是什麼？

Question

在下面的圖片中，我嘲笑了一個CSS活動菜單樣式，我希望找到示例並希望能夠複製。

你會發現有一個三角形突出活動的菜單，並且可以顯得大膽了。

問題1.實際調用的是什麼「活動菜單三角樣式」？所以我可以找到它的CSS例子。

問題2.我在哪裏可以找到這樣的例子？

Answer 1

所有通過CSS類，像這樣做：

HTML

<ul> 
    <li><a href="#">Menu Item 1</li> 
    <li><a href="#" class="selected">Menu Item 2</li> 
    <li><a href="#">Menu Item 3</li> 
    .... 
</ul> 

CSS

ul li a {padding: 6px; border-bottom: 1px solid #666; background-image: none; color: #454545} 

ul li a.selected { background: #fff url(triangle.png) no-repeat center bottom} 

扭捏背景位置，直到它與邊框貼合地配合。

Answer 2

我不知道它是如何調用的，但我想它不對應任何CSS屬性。你必須通過我認爲的背景圖像來實現這一點。

Answer 3

我不認爲這有一個名字，但它會很難做到這一點，而不必添加背景圖片。有了圖片就相當容易了，請參閱其他評論。

你當然可以使用:after一些CSS3技巧，以創建一個元素模擬的箭頭，就像這樣：

http://jsfiddle.net/upeRE/2/

但它不會在每個瀏覽器工作，你必須知道菜單項的寬度。

Answer 4

您需要查找css三角形菜單（或css3三角形）。 這些都是用透明的邊框製成的。 還有就是你怎麼可以在這裏做三角形一個很好的解釋：

http://jonrohan.me/guide/css/creating-triangles-in-css/

Answer 5

形狀被稱爲CSS多邊形。 Tantek Celik是最早在2001年撰寫關於該技術的書籍之一。設計模式被稱爲location-based breadcrumb。