方形图案作为背景上的div(纯CSS)

我试图找到如何构建这个模式,使用平行正方形(每个正方形约3px)作为背景使用css(不使用图像背景和重复X轴)作为背景.我只能找到国际象棋模式,但事实并非如此.任何人都可以帮我解决这个挑战吗？真谢谢你!

我在谷歌搜索了几个小时如何在这里制作这个模式:

虽然您的特定示例使用重复图像更容易制作,但使用纯CSS可以实现更有趣的效果,因此它不是无用的技能.和往常一样,在尝试学习与网络相关的东西时,MDN是一个很好的起点,并且有一篇关于CSS渐变的非常好的文章.这是它的缺点.

CSS渐变是返回图像的函数.最简单的是linear-gradient.在脑海中画一条水平线,沿着这条线放置一系列点,然后为其指定颜色.该功能将自动使这些点之间的颜色过渡平滑.

body {
  background-image: linear-gradient(to right, black 0%, black 50%, green 75%, yellow 100%);
}