html - 创建连续的 CSS 背景

Question

使用 CSS，我创建了一个纯色条纹背景图像，示例:
jsfiddle example

HTML

<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>

CSS

.box {
  width: 50px;
  height: 50px;
  background: #FFF;
  background: linear-gradient(#9CE2C0, #9CE2C0) no-repeat border-box, repeating-linear-gradient(135deg, #9CE2C0, #9CE2C0 5px, #D5F7E8 5px, #D5F7E8 8px);
  background-size: 100% 5px, 100% 100%;
  background-position: 0 0, 0 0;
  display: inline-block;
}

仅使用 CSS，如何设置这些背景的样式以使其跨元素无缝？

我希望能够添加更多相同尺寸的元素，并使它们无缝衔接。否则，我可以单独定位每个元素并手动放置背景，但我不想这样做。

Answer 1

尝试对您的第二个渐变进行此更新。

repeating-linear-gradient(135deg, #9CE2C0, #9CE2C0 5px, #D5F7E8 5px, #D5F7E8 11.8px);

或者玩具有.box的宽度