纯CSS 红砖背景墙

德育处主任

发布于 2022-09-23 10:07:08

3810

发布于 2022-09-23 10:07:08

文章被收录于专栏：前端数据可视化

本文简介

点赞 + 收藏 + 关注 = 学会了

先上图看看效果再介绍

我把这个想过设置在 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>

如果你愿意再写点小渐变，这个砖块的立体效果会更加明显~

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-05-29，如有侵权请联系 cloudcommunity@tencent.com 删除

网站

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

网站

css

登录后参与评论

0 条评论

热度