如何用箭頭指向右方創建標籤結構

Question

我想重現下面的HTML和CSS圖像。

一種選擇是使用圖片來做到這一點，而另一種選擇是使用CSS triangles接頭元件後，使得：

<div class="tab"></div><div class="arrow"></div> 

，然後放置它們。但有另一種方式來做到這一點，我可以得到的只是包含在CSS的選項卡中的一個的div箭頭效果使得：

<div class="tab"></div> 

完全夠用，無需單獨的箭頭元素

+ 1如果你包含一個JSFiddle。

Answer 1

我發現的最簡單快捷的方式就是使用這些精靈表單。添加：之後分開的圖像：之前變得非常快速笨重。

例如

header.content nav ul { 
    width:552px; 
    height:33px; 
    background:url("/assets/images/layout/main-nav-background.png") no-repeat; 
    background-position:0 -99px; 
    float:left; 
    list-style: none; 
} 

header.content nav.page2 ul { 
    background-position: 0 -66px; 
} 
header.content nav.page3 ul { 
    background-position: 0 -33px; 
} 
header.content nav.page4 ul { 
    background-position: 0 0px; 
}