Question

试图弄清楚如何减少线之间的间距。

我的代码基于lea verou的线性渐变模式

http://lea.verou.me/css3patterns/#zig-zag

Answer 1

更改渐变和背景大小元素

body {
background: 
linear-gradient(135deg, #ECEDDC 35%, transparent 25%) xpx 0px,
linear-gradient(225deg, #ECEDDC 35%, transparent 25%) xpx 0px,
linear-gradient(315deg, #ECEDDC 40%, transparent 25%),
linear-gradient(45deg, #ECEDDC 40%, transparent 25%);   
background-size: (x*2)px (x*2)px;
background-color: #EC173A;
}

在您的示例中，您使用了x = 50。

如果你想让曲折更接近或更远，你需要做一些数学运算 - 让背景尺寸更高，然后调整角度和百分比。

body {
background: 
linear-gradient(135deg, #abc 35%, transparent 25%) 20px 0px,
linear-gradient(225deg, #abc 35%, transparent 25%) 20px 0px,
linear-gradient(315deg, #abc 47%, transparent 30%),
linear-gradient(45deg, #abc 47%, transparent 25%);  
background-size: 40px 80px;
background-color: #123;
}

请参阅带有示例的游乐场：http://jsbin.com/gudanovo/1/

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <div class="box box4"></div>
</body>
</html>

CSS：

.box {width: 200px; float:left; height: 200px; border: 1px solid #333}

.box1 {
    background: 
        linear-gradient(135deg, #abc 35%, transparent 25%) 20px 0px,
        linear-gradient(225deg, #abc 35%, transparent 25%) 20px 0px,
        linear-gradient(315deg, #abc 48%, transparent 40%),
        linear-gradient(45deg, #abc 48%, transparent 40%);  
    background-size: 40px 80px;
    background-color: #123;
}

.box2 {
    background: 
        linear-gradient(135deg, #abc 35%, transparent 25%) 20px 0px,
        linear-gradient(225deg, #abc 35%, transparent 25%) 20px 0px,
        linear-gradient(315deg, #abc 40%, transparent 30%),
        linear-gradient(45deg, #abc 40%, transparent 25%);  
    background-size: 40px 40px;
    background-color: #123;
}

.box3 {
    background: 
        linear-gradient(135deg, #abc 35%, transparent 25%) 20px 0px,
        linear-gradient(225deg, #abc 35%, transparent 25%) 20px 0px,
        linear-gradient(315deg, #abc 31%, transparent 30%),
        linear-gradient(45deg, #abc 31%, transparent 30%);  
    background-size: 40px 21px;
    background-color: #123;
}

.box4 {
    background: 
        linear-gradient(135deg, #abc 35%, transparent 25%) 10px 0px,
        linear-gradient(225deg, #abc 35%, transparent 25%) 10px 0px,
        linear-gradient(315deg, #abc 40%, transparent 30%),
        linear-gradient(45deg, #abc 40%, transparent 25%);  
    background-size: 20px 20px;
    background-color: #123;
}

Answer 2

在制作CSS3渐变时，我发现这个工具很有帮助：

http://www.colorzilla.com/gradient-editor/

如何使用CSS3线性渐变？

2 个答案: