首页 文章

是否可以使用css3重复渐变创建此模式?

提问于
浏览
0

嗨我有这个图像我想从它做一个背景渐变而不是把它放入CSS:

enter image description here

是可能还是我推动CSS3渐变的极限 .
而且我不是在寻找具有多个div或任何类型的黑客的解决方案,只需要一个css类的渐变或重复渐变,我可以将其分配给一个元素并为其分配所需的模式 .

更新:

如果您检查上面的图像,则'll see the blue stripes doesn' t具有相同的宽度,因此基于此处缺少的@vals 's answer below, 2 gradients are not enough to have this pattern, we need 7 but I failed on realizing this pattern with regular linear-gradient or the repeating one, so what I' m是如何为具有已知宽度和高度的div绘制每个条带,以使此图案具有相同数量的条带和条带宽度 .

1 回答

  • 3

    您可以在同一背景中设置2个不同的渐变 . 然后,您只需根据需要对它们进行尺寸标注和定位

    div {
        width: 400px;
        height: 400px;
        background-image: repeating-linear-gradient(45deg, blue 0px, blue 20px, lightblue 20px, lightblue 40px), repeating-linear-gradient(135deg, blue 0px, blue 20px, lightblue 20px, lightblue 40px);
        background-size: 100% 50%;
        background-position: top left, bottom left;
        background-repeat: no-repeat;
    }
    

    demo

相关问题