如何使用向右箭头创建选项卡式结构

Question

我想在HTML和CSS中重现下面的图片。

一个选项是使用图像来执行此操作，另一个选项是在标签元素后使用CSS triangles，以便：

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

然后定位他们。但有没有另一种方法可以做到这一点，我可以得到一个div中的选项卡的css中包含的箭头效果，以便：

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

没有单独的箭头元素就足够了

如果包含JSFiddle，则

+1。

Answer 1

我发现最简单，最快捷的方法就是使用精灵表。添加：之后和单独的图像：在变得非常笨拙之前。

e.g。

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