斜め方向の罫線を使用した水平ナビゲーション - 「アクティブ」状態の処理方法

Question

私はブレーンストーミング支援のビットを探しています。

デザイナーがまとめたレイアウトをコーディングしていて、リンクが選択されているときに、エッジを傾けて青い背景から白い背景に移動する水平ナビゲーションを処理する方法を考えようとしています。

実際にはスクリーンショットを追加します。これは、実際にはタブ付きコンテンツ領域のナビゲーションです。スクリーンショットの上半分は、最初のタブが選択されたときの外観を示しています。スクリーンショットの下半分には2番目のタブが選択されています。

http://i.stack.imgur.com/P34yI.gif

だから、私の問題は、HTML要素が角度のエッジを持つ長方形ではなく、長方形であるという事実から来ています。シェイプをCSSの背景として保存したところ、各リンクが白くなり、BGイメージに次のリンクが埋め込まれてアングルの錯覚が生じることがわかるまで、うまくいきました。したがって、一番左のリンクは、中間のリンクと、右のリンクと、別の背景が必要です。

各リンクに一意のクラス/ ID（またはn番目の子を使用）を割り当てることができますソリューションを柔軟にして、今後別のリンクやタブを追加することができます

CSS3/HTML5 /または透明なPNGと負のマージンや相対的な配置を使用してこの外観を作成する方法に関するアイデアがあれば、私は不思議でしたか？

私はコードを求めているのではなく、私の仕事をしてもらう必要はありません:)私はちょうどアイデアを探しています。ちょっとしたコミュニティブレーンストーミング。もし誰かが私に知らせてくれる提案があれば、解決策につながるかもしれません。

ありがとうございます！

Answer 1

メニューの 'ul> li> a'構造を使用していると仮定すると、2つの斜めの背景（右と左...右は影が27px、左が約22px） 。左隅を<li>に、右隅を<a>に貼り付けます。これにより、各リスト項目の背景が2倍になるため、<li>の両側に負のマージンを使用して、兄弟をオーバーラップさせる必要があります。次に、z-indexを使用して、ホバー上にあることを確認するか、メニュー項目が他のメニューの上に現れることを強調表示します。私は、テキストの周囲に余分なスペースを作成するために、両側にパディングの追加30pxを追加しました：

li { 
    margin-right: -27px; 
    margin-left: -22px; 
    padding-left: 52px; 
    position: relative; 
    background: url(leftcorner.jpg) left top no-repeat; 
    background-color: #3aa1cc 
} 

li a { 
    padding-right: 57px; 
    background: url(rightcorner.jpg) right top 
} 

li:hover {z-index: 5; background: url(leftcorner-hover.jpg) left top no-repeat} 
li:hover a {background: url(rightcorner-hover.jpg) left top no-repeat} 

私はこれをテストしていませんが、私はそれはおそらくいくつかの追加の微調整で...動作するはずだと思います。

このソリューションは、あなたがして<li>にグラデーション背景を繰り返して1ピクセルを使用使用しなければならないことをやって...微妙な内部の影が含まれていません：前と2枚のコーナーの背景画像用の擬似要素の後に。

また、2つの別々の.jpg（通常とホバー）を配置しますが、実際にはスプライトと背景位置を使用して、ホバー状態イメージがロードされている間はフラッシュはありません。