css - 如何创建此 css 图案背景？

Question

我正在尝试使用多个渐变在 CSS 中创建可重复的背景。然而，它并没有真正按预期工作。

我知道了 JsFiddle展示我的进步

问题是我没有将对 Angular 线连接到长线，就像垂直线一样。我将如何实现这一目标？目标是实现无缝衔接。

代码:

body {
  background-image: linear-gradient(90deg, transparent 20%, black 25%, transparent 25%), linear-gradient(-45deg, transparent 20%, black 25%, transparent 25%);
  background-size: 30px 30px, 30px 30px;
}

Answer 1

也许有重复渐变:

body {
  min-height:100vh;
  margin:0;
  background: 
    repeating-linear-gradient(90deg, #0000 0 27px, black 0 30px), 
    repeating-linear-gradient(-45deg,#0000 0 27px, black 0 30px);
}