持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情
本文简介
点赞 + 收藏 + 关注 = 学会了
先上图看看效果再介绍
我把这个想过设置在 body 标签上了，所以整个网页的背景都变成了红砖效果。
在很多很多年前，我购买了《CSS揭秘》这本书，在里面发现了作者 Lea Verou 的网站。我必须推荐大家阅读《CSS揭秘》，里面的每个例子都让我拍案叫绝。
在我个人看来，这本书是每个打算从初升高的前端必读的css书籍，它是一本进阶级的书，不会跟你讲过多的css基础。
我在 《这18个网站能让你的页面背景炫酷起来》 里也推荐过她的网站，大家有兴趣可以去看看~
本文所讲的内容是 Lea Verou 网站中的 bricks 例子 里的代码，因为网站上没有解释这个实现原理，所以我打算简单讲两句。
如果你想直接获取完整代码，可以滑动到文章底部直接复制走人；你也可以先看看完整代码，然后自己分析一下，再和我的分析做对比~
动手实现
直接给答案：
- 用
background-image的渐变来实现；- 用2个直角三角形可以组合成1个矩形，而这两个三角形又有点色差的话，就能做出类似砖块的效果~
其实本例和 《纯CSS 实现格子背景（国际象棋棋盘）》 有点像，如果你读过格子背景那篇文章会更容易理解本文。
主要是通过两个不同颜色的三角形，合成一个长方形。再通过做2层这种长方形，调整好相应的位置，就形成以上效果。
画2个不同颜色的三角形，把下面三角形分别往上和往左移动一点点。
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
body {
background-image:
linear-gradient(335deg, #b00 23px, transparent 0),
linear-gradient(155deg, #d00 23px, transparent 0);
background-position: 0px 0px, 4px 33px;
background-size: 58px 58px;
}
</style>
从上图的效果可以看到行距比较大。所以需要再画一层同样的红砖，调整“新红砖层”的位置。
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
body {
background-image:
linear-gradient(335deg, #b00 23px, transparent 0),
linear-gradient(155deg, #d00 23px, transparent 0),
/* 新层 */
linear-gradient(335deg, #b00 23px, transparent 0),
linear-gradient(155deg, #d00 23px, transparent 0);
/* 最后的 30px 29px, 34px 4px 是对新层的定位 */
background-position: 0px 0px, 4px 33px, 30px 29px, 34px 4px;
background-size: 58px 58px;
}
</style>
如果你愿意再写点小渐变，这个砖块的立体效果会更加明显~
