8

CSS3のみを使用して、下の図に非常によく似たものを達成しようとしています。

ここに画像の説明を入力

唯一の違いは、最後の div の先端が尖っていることです。

適応に似たものを探していると、私がやりたいことに非常に近いこのjsフィドルに出くわしましたが、2つの問題があります.1つ目はキャンバスで行われ、2つ目は「描画」を余儀なくされます矢印は、矢印ごとに実質的に 2 回 (1 つは div 用で、もう 1 つは次の矢印の前のスペース用です)。これを行うためのよりクリーンな方法が必要です-誰かが私にここで方向性を教えてもらえますか?

私が知る必要があるのは、上の図に示されているもの (一連の重複する div 矢印) を CSS3 のみで構築する方法です。

4

2 に答える 2

24

これを試してください-http://jsfiddle.net/ksNr3/8/

ul {
    margin: 20px 60px;
}

ul li {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: 100px;
    margin: 5px 1px 0 0;
    text-indent: 35px;
    position: relative;
}

ul li:before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    left: -2px;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #fff;
    z-index: 0;
}

ul li:first-child:before {
    border-color: transparent;
}

ul li a:after {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -15px;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #ccc;
    z-index: 10;
}

ul li.active a {
    background: orange;
    z-index: 100;
}

ul li.active a:after {
    border-left-color: orange;
}

ul li a {
    display: block;
    background: #ccc;
}

ul li a:hover {
    background: pink;
}

ul li a:hover:after {
    border-color: transparent transparent transparent pink; 
}
​

更新 -クリック可能にし、重複領域を最小限に抑えました-http://jsfiddle.net/ksNr3/8/

于 2012-06-17T22:13:37.220 に答える
7

次の CSS3 ソリューションは、画像を使用せず、簡単に操作できます。

さらに拡張できる 2 つの完全にコメントされた例を作成しました。

1 つの例では、互いに「視覚的に」積み重ねられた矢印があります。

他の例は、矢印に「エンドキャップ」が付いた、質問の画像と同じです。

各例には単純な jQueryイベント リスナーがあるため、パンくずリスト.click()のどこをクリックしても、アンカーが正しいクリック イベントを受け取ることがわかります。アローテールは正しく機能します。

スクリーンショットは、NavBar のブレッドクラムのアクティブな CSS ホバーを示しています。

ここに画像の説明を入力

ブラウザーで CSS が無効になっている場合、ブレッドクラム ナビゲーションは、アクセシビリティ要件のために適切にフォールバックします。

参考：    jsFiddle

于 2012-07-01T13:09:01.347 に答える