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

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

CSS background grids: horizontal repeating-linear-gradient with single vertical column

css

linear-gradients