我把这个想过设置在
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);
background-position: 0px 0px, 4px 33px, 30px 29px, 34px 4px;
background-size: 58px 58px;
</style>
如果你愿意再写点小渐变，这个砖块的立体效果会更加明显~
👍《纯CSS 实现格子背景（国际象棋棋盘）》
👍《这18个网站能让你的页面背景炫酷起来》
👍《console.log也能插图》
👍《阅读Skeleton.css源码》
👍《纯css实现117个Loading效果》
👍《纯CSS：动态渐变背景》
