製作CSS三角形重複垂直（鋸齒圖案）

我有導航，如：製作CSS三角形重複垂直（鋸齒圖案）

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

而且我想：

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

我決定這將是最容易做到這一點作爲單獨的div中，第二隻關注重複沿着導航長度的模式。

我在這裏尋找幫助，但我發現大多數文章都是關於水平重複三角形的。我喜歡這個解決方案http://jsfiddle.net/QeZG6/, ，但我不知道如何將代碼轉換爲垂直堆棧右邊的三角形。有關的答案，怎麼辦線性漸變

幫助表示讚賞

來源

2015-02-05 Kiwizoom

你嘗試'重複-y'而不是隊友。這似乎解決了它。發佈這個答案讓我覺得很奇怪，因爲我在這裏基本上什麼都沒做。 [Sample Fiddle]（http://jsfiddle.net/QeZG6/38/）。 – Harry 2015-02-05 17:20:44

repeat-y不會使三角形面向右，但是 – Kiwizoom 2015-02-05 17:22:37

取決於您是否正在查看白色或黑色三角形:) [This]（http://jsfiddle.net/QeZG6/40/）可能更接近於你正在尋找。 – Harry 2015-02-05 17:23:15

我認爲你正在尋找的東西更接近

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

來源

2015-02-05 17:32:22

這看起來不錯。你怎麼看135和45度？ – Kiwizoom 2015-02-05 17:44:28

我只是將高度和寬度設置爲一個正方形（50像素×50像素），然後使用更多基本角度來獲得所需的結果要容易得多。 – 2015-02-05 17:51:48

-1

如果你想他們會出現在右側，那麼你將需要使用background-position和重複設置爲y。

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

來源

2015-02-05 17:22:18

重複-y很簡單，但我需要三角形面對正確。 – Kiwizoom 2015-02-05 17:23:14

我會建議使用你需要的三角形的實際圖像，因爲你會遇到線性漸變的一些兼容性問題。 – 2015-02-05 17:25:42

這是一個值得關注的問題，我考慮過了。但我略微決定學習線性梯度，好或壞 – Kiwizoom 2015-02-05 17:38:47

試着這麼做

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

來源

2015-02-05 17:30:23 Oriol

你知道，如果你需要的是旋轉噸，那麼你可以在技術上，旋轉。你會保持流暢的邊緣這樣...

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

來源

2015-02-05 17:39:47 Banana

我不認爲我見過css旋轉，有趣 – Kiwizoom 2015-02-05 17:45:15

@Kiwizoom有大量的2D和3D CSS轉換，它非常酷，非常方便 – Banana 2015-02-05 17:46:04

製作CSS三角形重複垂直（鋸齒圖案）

回答

相關問題