用CSS渐变来创建你所想要的任何几何背景图案吧

用CSS渐变来创建你所想要的任何几何背景图案吧

 2016-09-27 14:55    网页设计   安南子   1113    发表评论

之前的文章中，我们提起了用CSS来创建基础的条纹背景图案。但我们是不满足的生物，用CSS还能找到其他不同的图案，比如说网格、波点、棋盘等。

网格

网格的创建也是基于条纹线条来做的。当我们把多个渐变团组合起来，让他们透过彼此的透明区域呈现时，神奇的事情就发生了：

background:white;
background-image:linear-gradient(90deg,
    rgba(200,0,0,.5) 50%,transparent 0),
    linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size:30px 30px;

有些时候，我们希望网格中间的每个格子的大小可以调整，而网格线条粗细同时保存固定的话，那可以通过使用长度而不是百分比来作为色标的场景。

background:white;
background-image:linear-gradient(90deg,
    rgba(200,0,0,.5) 15px,transparent 0),
    linear-gradient(rgba(200,0,0,.5) 15px,transparent 0);
background-size:30px 30px;

我们甚至还可以搞大点，把不同线宽、不同颜色的网格图案叠加起来，得到一个更加逼真的效果：

background:white;
background-image:
    linear-gradient(90deg,rgba(200,0,100,.5) 15px,transparent 0),
    linear-gradient(rgba(100,100,0,.5) 50%,transparent 0),
    linear-gradient(90deg,rgba(60,60,10,.5) 20px,transparent 0),
    linear-gradient(90deg,transparent 0,rgba(160,160,160,.2) 40%);
background-size:30px 30px,20px 20px,
                40px 40px,30px 30px;

波点

到上面这里，我们一直使用的是条线渐变的原理，如果你属性PS，那应该知道还有一个渐变叫做径向渐变。通过它，我们可以创建圆形、椭圆，或者圆点的整列：

坦白说。这样不是很实用，我们应该把这个错开会更好点，于是我们改变下结构就是：

background:#58a;
background-image:
    radial-gradient(#fff 30%,transparent 0),
    radial-gradient(#fff 30%,transparent 0);
background-size:40px 40px;
background-position:0 0,20px 20px;

这里的20px是取的40px值的一半，如果我们需要修改这个数字，那就要同时修改4个地方。显然，这很痛苦。于是我们使用了SCSS预处理器，这样就方便多了：

@mixin polka($size,$dot,$base,$accent){
    background:$base;
    background-image:
        radial-gradient($accent $dot,transparent 0),
        radial-gradient($accent $dot,transparent 0);
    background-size:$size $size;
    background-position:0 0,$size/2 $size/2;
}

在使用时，我们就可以直接这样调用它了：

@include polka(40px,30%,#fff,#58a);

棋盘

棋盘图案很多情况下都会用到，photoshop里面，这种格式通常来说是透明的意思。棋盘图案似乎可以通过平铺的方式来制作，只要两种不同颜色的方格，且相互间隔就能做出这种效果。

但在技术上，我们用CSS渐变来创建的平铺方块时会发现，仅用一层CSS渐变无法创建四周有空隙的方块。如果你有疑惑，欢迎尝试下。

那么我们是不是可以通过其他图形来拼合成所需的形状呢？答案肯定的三角形*2

我们先来创建一个三角形吧：

background:#eee;
background-image:linear-gradient(45deg,#bbb 50%,transparent 0);
background-size:30px 30px;

额，好像三角形大了点。没事，我们把50%调整为25%就缩小了，顺便把另外那个也创建下：

background:#eee;
background-image:linear-gradient(45deg,#bbb 25%,transparent 0),
                linear-gradient(45deg,transparent 75%,#bbb 0);
background-size:30px 30px;

我了个去，怎么变成这样了，额。应该把两个渐变错开点放的：

background:#eee;
background-image:linear-gradient(45deg,#bbb 25%,transparent 0),
                linear-gradient(45deg,transparent 75%,#bbb 0);
background-position:0 0,15px 15px;
background-size:30px 30px;

好了，到现在为止，棋盘布局的一班我们就创建好了，下面只要再调整下数值，我们就可以很容易的搞出另外一个方形了：

background:#eee;
background-image:linear-gradient(45deg,#bbb 25%,transparent 0),
                linear-gradient(45deg,transparent 75%,#bbb 0),
                linear-gradient(45deg,#bbb 25%,transparent 0),
                linear-gradient(45deg,transparent 75%,#bbb 0);
background-position:0 0,15px 15px,15px 15px,30px 30px;
background-size:30px 30px;

和上面波点一样，如果你嫌麻烦，也可以转换成预处理器再调用。另外，《CSS揭秘》书中还提到SVG的方法，也比较实用，有兴趣的朋友可以查看下。