制作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三角形重复垂直（锯齿图案）

回答

相关问题