html - 使 CSS 三 Angular 形垂直重复(锯齿图案)

Question

我有这样的导航:

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

我想:

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

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

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

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

Answer 1

我想你正在寻找更接近的东西

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