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个渐变。第一个总是在下一个上面。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;