0

以前どこかでこれを見たことがあることは知っていますが、透明な切り抜き三角形のマーカーが付いた黒い固定ナビゲーションバーを作成しようとしています。三角形のカットアウトを背景に対して透明にするための助けが必要です。これにより、ページをスクロールすると、下のコンテンツが透けて見えるようになります。

ページセクションに応じて.currentクラスを移動するJavaScriptを使用した標準のリスト/アンカーナビゲーションがあります。

<div class="navbar">
<ul>
    <li class="current"><a>home</a></li>
    <li><a>products</a></li>
    <li><a>services</a></li>
    <li><a>contact us</a></li>
</ul>
</div>

次の CSS でスタイルを設定します。

.navbar {
    width: 100%;
    position: fixed;
    background: black;
    float: left;
}

ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
}


a {
    padding: 10px 20px 20px;
}

.current a {
    background: transparent url('../img/wedge-red.png') center bottom no-repeat;            
}

私が考えることができる唯一の方法は、ul の両側に追加の div を追加して背景を割り当て、li a の背景としてカットアウト付きの透明な png を使用することです。

そのように本当に醜くなったり、余分なdivを追加したりせずにこれを行う方法はありますか?

4

2 に答える 2

0

これが私が最終的に得たものです-境界線を拡張し、オーバーフローでそれらをトリミングします：hidden; （少しハッキーですが、動作し、DOMに要素を追加しません）：

    .navbar {
        width: 100%;
        height: 60px;
        position: fixed;
        overflow: hidden;
    }


    ul {
        border-left: solid black 2000px;
        border-right: solid black 2000px;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -2000px;
    }

上記は私の目的にはうまく機能し、レスポンシブ環境で動作します。

このページの他の答えは、：beforeと：afterの疑似要素を使用しても、私の目的には機能しませんでした。煩雑になりすぎて、疑似要素が適切に配置されず、ブラウザウィンドウのサイズが変更されたときに次の行に折り返され続けました。提案されたその解決策は、元の質問で指定されたパーセンテージではなく、固定幅の要素で機能します。

于 2013-01-25T21:30:45.160 に答える
0

CSS疑似要素を試してみてください！

DOM 内の既存の要素の前後に 2 つの自由な DOM 要素を追加します。スタイリングのニーズを満たすためにマークアップに何かを追加したくない場合に最適です。

CSS マークアップ

.item:before {
    content:"";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: silver;
}
.item:after {
    content:"";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: gray;
}

HTML

<div class="item">Content</div>

デモについては、このJSFiddleを確認してください。

それらを表示するには、 content: ""とdisplay:blockを設定してください。

于 2013-01-24T00:03:02.440 に答える