創建連續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背景

回答

相關問題