html - 如何创建带有向右箭头的选项卡式结构

Question

我想用 HTML 和 CSS 重现下面的图像。

一种选择是使用图像来做到这一点，另一种选择是在选项卡元素之后使用CSS 三角形，这样：

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

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

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

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

如果您包含 JSFiddle，则 +1。

Answer 1

我发现最简单和最快的方法就是为这些使用精灵表。为 :before 添加 :after 和单独的图像会很快变得笨拙。

例如

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