我把这个想过设置在 body 标签上了，所以整个网页的背景都变成了红砖效果。

在很多很多年前，我购买了《CSS揭秘》这本书，在里面发现了作者 Lea Verou 的网站。我必须推荐大家阅读《CSS揭秘》，里面的每个例子都让我拍案叫绝。

在我个人看来，这本书是每个打算从初升高的前端必读的css书籍，它是一本进阶级的书，不会跟你讲过多的css基础。

我在 《这18个网站能让你的页面背景炫酷起来》 里也推荐过她的网站，大家有兴趣可以去看看~

本文所讲的内容是 Lea Verou 网站中的 bricks 例子 里的代码，因为网站上没有解释这个实现原理，所以我打算简单讲两句。

如果你想直接获取完整代码，可以滑动到文章底部直接复制走人；你也可以先看看完整代码，然后自己分析一下，再和我的分析做对比~

直接给答案：

其实本例和 《纯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>
如果你愿意再写点小渐变，这个砖块的立体效果会更加明显~
👍《纯CSS 实现格子背景（国际象棋棋盘）》
👍《这18个网站能让你的页面背景炫酷起来》
👍《console.log也能插图》
👍《阅读Skeleton.css源码》
👍《纯css实现117个Loading效果》
👍《纯CSS：动态渐变背景》
 
 
  
 
 

    德育处主任
        👮‍♂️可爱又迷人的反派保安 @德育处
      
 
粉丝