css - 跨菜单按钮 CSS 之字形线

Question

我对此进行了一些研究，但似乎找不到正确的信息。我试图在我的导航栏顶部画一条曲折线：

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

有没有办法可以将 CSS 添加到菜单项以产生这种效果？

如果没有，我怎么能得到它？

Answer 1

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

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>

这应该可以解决问题。三角形的大小可以通过背景大小和线性渐变进行调整。