CSS 5 方形背景图案

Question

我正在寻找一种简洁的 CSS 解决方案来为元素的背景创建特定的图案。该图案是本页顶部带红点的小图案:

这是上面放大的图像，因此更容易看到图案:

我只关心红点图案，不关心边框。

我已经尝试了很多像下面这样的变体，但似乎无法破解它:

div {
  background-image: 
    linear-gradient(-45deg, red 25%, transparent 25%), 
    linear-gradient(45deg, red 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, red 75%), 
    linear-gradient(-45deg, transparent 75%, red 75%);
    background-size: 2px 2px;
    background-position: 40.5% 0, 40.5% 52%, 0 0, 0.05% 52%;
}

Answer 1

虽然@haxxxton 的回答是光明正大的，我对此表示赞赏，但我最终想出了如何仅使用 CSS 来做到这一点。

它与示例背景图案完全匹配，并且易于更改颜色。

这是我想出的:

.background {
  background-color: white; 
  background-image: 
    repeating-linear-gradient(-45deg, transparent, transparent 33%, red 0%, red 50%),
    repeating-linear-gradient(-45deg, transparent, transparent 33%, white 0%, white 50%),  
    repeating-linear-gradient(-45deg, transparent, transparent 33%, white 0%, white 50%),  
    repeating-linear-gradient(45deg, transparent, transparent 33%, red 0%, red 50%); 
  background-size: 4px 4px;
  background-position: -1px, 2px, 1px 1px;
}