使CSS三角形垂直重復（鋸齒圖案）

Question

我有導航像：

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

而且我想：

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

我決定最簡單的做法是將它作為單獨的div，第二個只關心在導航長度上重復一個模式。

我在這里尋求幫助，但我找到的大多數文章都是關於水平重復的三角形。 我喜歡這個解決方案http://jsfiddle.net/QeZG6/ ，但我不知道如何將代碼轉換為垂直堆疊面向右的三角形。

有關答案以及如何進行線性漸變的幫助表示贊賞

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

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(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> 

Answer 4

如果您希望它們出現在右側，則需要使用background-position並將repeat設置為y。

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