跨菜单按钮 CSS 之字形线

Posted 2023-02-21

【中文标题】跨菜单按钮 CSS 之字形线

【英文标题】：Zig Zag Line across menu buttons CSS

【发布时间】：2014-12-08 04:23:37

【问题描述】：

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

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

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

如果没有，我怎样才能到达那里？

【参考方案1】：

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

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>

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

【讨论】：

我在您的回答中将其设置为堆栈 sn-p，对其进行编辑并覆盖一些菜单项/将三角形排列在顶部:)

感谢您的信息。不过我还是很困惑。它应该是这样的吗？ .nav_item_1:before background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0); background-position: left-bottom; background-repeat: repeat-x; background-size: 32px 32px; content: " "; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 32px; ?如何调整尖峰的大小？如何将尖峰从指向向下更改为向上？谢谢

@user3398196 请看看我的编辑，希望它能解决问题。尖峰大小可以通过线性渐变大小和背景大小进行更改。