代码之家 › 专栏 › 技术社区 › Tobias Glaus

CSS中的1px宽对角线条纹之间有间隙

css html

Tobias Glaus · 技术社区 · 8 年前

我试图在CSS中做一些事情,但我失败了。
这是我目前得到的:

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

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

但我想要实现的是,条纹之间有5px的空间。
我试着改变百分比,但这也没有产生我想要做的事情。

1 回复 | 直到 8 年前

Paulie_D 8 年前

像这样的使用 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;
}