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

尝试类似

的内容

＆＃13;

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

＆＃13;

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并将重复设置为y。

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

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

4 个答案: