CSS 背景网格 : horizontal repeating-linear-gradient with single vertical column

Question

我正在尝试仅使用 CSS 在单个元素上创建特定的背景图案。下图显示了我想要的最终结果:

我可以使用以下方法创建重复的水平条纹:

  background-image: repeating-linear-gradient(
                  to bottom,
                  #f7f7f8 0,
                  #f7f7f8 32px,
                  rgba(255, 255, 255, 0) 32px,
                  rgba(255, 255, 255, 0) 64px
  );

但我正在努力将其与右侧的垂直条结合起来。我什至不确定是否有可能实现我想要的......它需要:

• 与右手边的距离以像素为单位
• 固定宽度，以像素为单位
• 完全覆盖下面的水平网格，即。无论底层颜色如何，它都应该是相同的颜色 - 没有透明度。

这可能吗？

Answer 1

您可以将 2 个渐变叠加在一起。首先总是在下一个之上。

html {
  min-height: 100%;
  background: linear-gradient(
      to left,
      transparent 140px,
      grey 140px,
      grey 143px,
      transparent 143px
    ),
    repeating-linear-gradient(
      to bottom,
      lightgrey 0,
      lightgrey 20px,
      transparent 20px,
      transparent 40px
    );
}