棋盘背景
上图貌似可以在CSS中很容易重现出来,只要创建两个不同背景定位的方块就可以了,但是并非如此,我们没有办法使用渐变创建一个四周有空隙的方块。
解决方式:
我们可以通过两个直角三角形拼接成,首先我们线创建一个直角三角形,并把它的直角边缩小
.div_bg{
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0);
background-size: 30px 30px;
}
效果图:
接下来,我们在创建一个不同背景定位的反向三角形,与其拼接成正方形
.div_bg{
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}
效果图:
最后,我们只需要创建一组重复渐变,并偏移他们的定位值即可
.div_bg{
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-size: 30px 30px;
background-position: 0 0,15px 15px,15px 15px, 30px 30px;
}
到目前为止,我们的棋盘图案已经完成了。
优化
将四层渐变改为两层渐变,并把深灰色改为半透明黑色,这样只需修改background
的颜色值即可改变主色调。
.div_bg{
background: #eee;
background-image: linear-gradient(45deg,rgba(0,0,0,.2) 25%, transparent 0, transparent 75%, rgba(0,0,0,.2) 0),
linear-gradient(45deg,rgba(0,0,0,.2) 25%, transparent 0, transparent 75%, rgba(0,0,0,.2) 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}