如何仅用纯CSS实现格子背景效果？

本文共计836个文字，预计阅读时间需要4分钟。

原文简介：本文字简要介绍CSS绘制格子背景的方法，并提供相关步骤、思路和直接答案。

内容：- 本文字简要介绍CSS绘制格子背景的方法，并提供相关步骤、思路和直接答案。- 学习了如何使用CSS绘制格子背景。- 本次会使用CSS画出格子背景。- 逐步分析如何实现： - 思路：使用两个等高的直角三角形拼接，形成一个正方形。 - 直接答案：使用两个等高的直角三角形拼接，形成一个正方形。

本文简介

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

这次会使用css画出一个格子背景。并且一步步分析如何实现~

思路

直接给答案：通过2个相等的直角三角形拼接，形成一个正方形。

三角形可以使用 background-image 的渐变来实现。

html, body { margin: 0; width: 100%; height: 100%; } body { background-image: linear-gradient(45deg, #000 25%, transparent 0); }

此时出来的效果如上图所示。

做一个45度的线性渐变，第一个颜色是#000（黑色），占整个背景贴片的25%，其余部分都是红色。

在上面的基础上，用 background-size 来控制背景贴片的大小。