Zig Zag Line跨菜单按钮CSS

Question

我已经对此做了一些研究，但似乎无法找到正确的信息。我正试图在我的导航栏顶部找到一条曲折线：

我创建了上面的图片来非常简单地解释一下。顶部之字形是一个图像，我想在导航栏的顶部获得相同的效果，如图中所示的蓝色所示。我只是使用photoshop复制效果并编辑到导航栏上。

有没有办法可以在菜单项中添加CSS来实现这种效果？

如果不能，我怎么能在那里得到它？

Answer 1

如果我理解正确，你会想要用css制作很多小三角形。如果是这样的话，这是一篇很棒的文章here现在基本上它使用渐变来制作背靠背的三角形。可以找到js小提琴here

＆＃13;

＆＃13;

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;
}

＆＃13;

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

这应该可以解决问题。可以使用背景大小和线性渐变来调整三角形的大小。