如何使用 CSS3 线性渐变

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

http://jsbin.com/tibipehu/1/edit

我的代码基于Lea Verou的线性渐变模式

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

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

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

更改渐变和背景大小元素

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

相关内容

最新更新

热门标签：