Question

我试图在CSS中做点什么，但我失败了。
这是我到目前为止所做的：

＆＃13;

#stripes {
  height:90vh;
  background-image: linear-gradient(-45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
  background-size:4px 4px;
}

＆＃13;

<div id="stripes"></div>

＆＃13;

正如您所看到的，＆＃34;黑白比率＆＃34;总是一样的。所以你得到1px条纹，然后1px间隙，1px条纹，1px间隙，...

但我想要实现的是，条纹之间有5px空间。我尝试改变百分比，但这并没有导致我尝试做的事情。

我确定这可能是某种方式。有谁知道怎么样？谢谢你的帮助！

Answer 1

使用repeating-linear-gradient

这样的事情

#stripes {
  height: 100vh;
  background: repeating-linear-gradient( -45deg, transparent, transparent 5px, /* gap */
  black 6px, /* overall width incluing gap */
  black 6px);
}

* {
  margin: 0;
  padding: 0;
}

<div id="stripes"></div>

1px宽的斜条纹，CSS之间有间隙

1 个答案: