创建连续CSS背景

使用CSS，我创建了一个坚实和条纹背景图像，例如：
jsfiddle example 创建连续CSS背景

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 ，如何设计这些背景以便它们在元素之间无缝连接？

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

来源

2015-09-01 Flignats

试用此更新你的第二个梯度。

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

或使用.box的宽度

来源

2015-09-01 16:40:53 Twintails

嗨双胞胎 - 谢谢！这是最简单的答案。我没有意识到可以使用一个像素的部分。很好，再次感谢。 – Flignats

尝试180度！

或...只需使用一个div来保存所有四个div并设置背景。

如果你想要所有的4个div都是不同的颜色条纹（或者有类似的视觉效果），但是仍然排队，这是一个不同的问题！

来源

2015-09-01 16:13:15 Andy

安迪您好玩具 - 对，180deg DEF根据需要对齐。不幸的是，对角线是必要的。一个div也可以解决这个问题，但这不是我正在使用的设计的一个选项。 – Flignats

可以有很多方法来实现这一点。一个是保持当前的html结构，并为他的背景玩旋转度。另一种方法是修改一下html，并把所有的div都包含在父div中。给后面的父div。这里是一个更新fiddle

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

CSS：

.box-parent { 
width: auto; 
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; 

} 
.box{width:50px; display: inline-block;}

来源

2015-09-01 16:22:33

创建连续CSS背景

回答

相关问题