5

これはすでに尋ねられていますが、別の方法で必要です。下の画像を見て、実現しようとしているナビゲーション バーを確認してください。

ナビゲーション

問題:

  • エッジの周りの影
  • バー内のテキスト/画像
  • 図の周りに1pxの実線の境界線があれば素晴らしいでしょう

もちろん、静止画像でも可能ですが、別のものを使用したいと思います。それを行う方法についてのアイデアはありますか (可能な限り多くのブラウザをサポートして)。

編集： <nav>絶対配置です

これが私がこれまでにしたことです

ナビゲーションバーの進行状況

しかし、境界線を適用することはできず、固定サイズも問題があります。

    nav {
       float: left;
       position: absolute;
       background-color: #ffffff;
       top: 0;
       left: 0;
       display: inline;
       padding: 12px;
       padding-right: 0;
       width: auto;
    }

    .behind_nav {
       height: 60px;
       width: 523px;
       position: absolute;
       top: 0;
       left: 0;
       border-right: 20px solid transparent;
       border-top: 48px solid white;
    }

.behind_nav遅れてい<nav>ます（驚き、驚き）。実際には、上記の影と境界線の問題を除いて、これはうまく機能します。また、固定値にバインドされているため、問題があります。<nav>幅をコンテンツに合わせます (CMS データ / ブラウザによって異なる場合があります)

4

2 に答える 2

8

大まかなデモ: http://jsfiddle.net/W82UV/3/

ここに画像の説明を入力

これは、エッジの歪み、ドロップ シャドウ、および境界線など、問題の核心をカバーしていると思います。

<div id="top">
    The top bar
</div>
<div id="container">
    <div id="background">        
    </div>
    <nav>
        Test
    </nav>
</div>

#top{  
    background-color: #f0f0f0;
    border-bottom: 1px solid #555;
    box-shadow: 8px 8px 8px #aaa;
}

#container {
    position: relative;
    top: -1px;
    overflow: hidden;
    height: 96px;
}

#background {
    background-color: #f0f0f0;

    position: absolute;
    top: -1px;
    left: -32px;
    border: 1px solid #555;

    width: 400px;
    height: 64px;
    box-shadow: 8px 8px 8px #aaa;

   -webkit-transform: skew(-20deg); 
   -moz-transform: skew(-20deg); 
   -o-transform: skew(-20deg);
   -ms-transform: skew(-20deg); 
   transform: skew(-20deg);
}

IE 8 (スキューなし)、9、10、FF、および Chrome でテスト済み。最終的な解決策 (より良いクラス名および/または ID) のためにマークアップを少し整理し直して、すべてを比例して配置することに注意してください。

于 2013-03-04T02:33:17.113 に答える
1

エッジの静止画像が唯一の方法のように見えます（技術的に取得してキャンバスを使用したい場合を除きますが、それはばかげているでしょう）. 回転したブロックを使用して斜めのエッジを取得できますが、影の問題が発生します。バー内のテキストは問題ないように見えますが、参考までに、これらのナビゲーション バーは通常、フラット リストとして実装されます。

申し訳ありませんが、これ以上お役に立てませんでした。

于 2013-03-04T02:19:35.400 に答える