如何用箭头指向右方创建标签结构

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; 
}