使 CSS 个三角形垂直重复（锯齿图案）

Question

我有这样的导航：

------
|    |
|    |
|    |
|    |
|    |
------

我想：

------
|    |>
|    |>
|    |>
|    |>
|    |>
------

我认为最简单的做法是将其作为单独的 div，第二个只关心沿导航长度重复一个模式。

我在这里寻求帮助，但我找到的大多数文章都是关于水平重复三角形的。我喜欢这个解决方案 http://jsfiddle.net/QeZG6/ ，但我不知道如何将代码转换为垂直堆叠右向三角形。

感谢有关答案和如何做线性渐变的帮助

Answer 1

如果您希望它们出现在右侧，则需要使用 background-position 并将重复设置为 y。

http://jsfiddle.net/QeZG6/39/

Answer 2

试试

html {
    background-image: linear-gradient(319deg, transparent 30px,black 31px),
                      linear-gradient(39deg, black 16px, transparent 17px);
    background-size: 23px 40px;
    background-repeat: repeat-y;
}

Answer 3

我想你正在寻找更接近

的东西

.pattern {
       background-image: linear-gradient(135deg, black 17px, transparent 18px), linear-gradient(45deg, black 17px, transparent 18px);
       background-size: 50px 50px;
       background-repeat: repeat-y;
       height: 200px;
}

Answer 4

你知道，如果你只需要旋转它，那么从技术上讲，你可以旋转它。这样你就可以保持光滑的边缘...

.pattern {
    background-image: linear-gradient(320deg, black 15px, transparent 18px), linear-gradient(40deg, black 16px, transparent 18px);
    background-size: 54px 23px;
    background-repeat: repeat-x;
    height: 26px;
    width:500px;
    transform:rotateZ(90deg) translate(200px,250px);
}

<div class="pattern"></div>

使 CSS 个三角形垂直重复（锯齿图案）

Make CSS triangle repeat vertically ( sawtooth pattern )

html

css

css-shapes