2

以下の画像をHTMLとCSSで再現したいと思います。

1 つのオプションは、イメージを使用してそれを行うことであり、別のオプションは、次のようにタブ要素の後にCSS 三角形を使用することです。

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

配置します。しかし、次のような1つのdivのタブのcssに含まれている矢印効果を取得できる別の方法はありますか?

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

別の矢印要素がなくても十分です

JSFiddle を含める場合は +1。

タブ構造

4

1 に答える 1

1

最も簡単で迅速な方法は、これらにスプライト シートを使用することです。:after と :before の個別の画像を追加すると、非常に高速で扱いにくくなります。

例えばここに画像の説明を入力

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;
}
于 2013-03-06T18:43:38.743 に答える