CSS 背景网格：具有单个垂直列的水平重复线性渐变

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
    );
}