1

私はこれについていくつかの調査を行いましたが、適切な情報を見つけることができないようです. ナビゲーション バーの上部にジグザグ線を引こうとしています。

例

物事を非常に簡単に説明するために上の画像を作成しました。上部のジグザグは画像であり、選択された青い部分が画像に表示されているように、ナビゲーション バーの上部に同じ種類の効果を得たいと考えています。Photoshop を使用してエフェクトをコピーし、ナビゲーション バーに編集しました。

メニュー項目に CSS を追加してこの効果を与える方法はありますか?

そうでない場合、どうすればそこに到達できますか？

4

1 に答える 1

3

私があなたを正しく理解していれば、css を使用して小さな三角形をたくさん作りたいと思うでしょう。もしそうなら、これは素晴らしい記事です ここでは、基本的にグラデーションを使用して背中合わせの三角形を作成します。そのためのjsフィドルはここにあります

ul li {
    display: inline;
    position: relative;
    padding: 16px 8px 8px 8px;
    background: #dddccf;
}
ul li:before {
    background: linear-gradient(145deg, #ffffff 8px, transparent 0), linear-gradient(-145deg, #ffffff 8px, transparent 0);
    background-repeat: repeat-x;
    background-size: 16px 16px;
    content: " ";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
    background-position: left-bottom;
}
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

これで問題は解決するはずです。三角形のサイズは、背景サイズと線形グラデーションで調整できます。

于 2014-12-08T04:37:39.433 に答える