使用CSS創建響應式重複各種高度垂直線模式

Question

很確定這可能與CSS3，但我不知道如何。鑑於這種設計模式

創建CSS3放大或縮小，以填補一個負責任的容器水平井號（作爲背景？）。

Chris Coyier提供了這個Vertical Stripe CodePen，但是如何修改以重新創建上面的模式呢？

HTML

<div class="module"> 
<h2 class="stripe-6">Vertical</h2> 
<p>You could do some schenigans where you have a big rotated element within 
this header area (with hidden overflow) that has these stripes. That way 
you could get away with not using repeating-linear-gradient.</p> 
</div> 

CSS

.module { 
    background: white; 
    border: 1px solid #ccc; 
    margin: 3%; 
    > h2 { 
    padding: 1rem; 
    margin: 0 0 0.5rem 0; 
    } 
    > p { 
    padding: 0 1rem; 
    } 
} 

.stripe-6 { 
    color: black; 
    background: repeating-linear-gradient(
    to right, 
    #f6ba52, 
    #f6ba52 10px, 
    #ffd180 10px, 
    #ffd180 20px 
); 
} 

這裏有一個更大，更高對比度的圖像查看模式更好（感謝@馬丁！）

Answer 1

是的，這是絕對有可能使用linear-gradient背景圖像創建此模式。與Chris Coyier生成的模式不同，這需要兩個線性漸變，因爲有兩個不同高度和間距的條紋。

.bg-pattern{ 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: rgb(115,199,192); 
 
    background-image: linear-gradient(to right, rgba(0,0,0,0.25) 6px, transparent 6px), linear-gradient(to right, transparent 12px, rgba(0,0,0,0.25) 12px, rgba(0,0,0,0.25) 14px, transparent 14px, transparent 20px, rgba(0,0,0,0.25) 20px, rgba(0,0,0,0.25) 22px, transparent 22px, transparent 28px, rgba(0,0,0,0.25) 28px, rgba(0,0,0,0.25) 30px, transparent 30px, transparent 36px, rgba(0,0,0,0.25) 36px, rgba(0,0,0,0.25) 38px, transparent 38px); 
 
    background-repeat: repeat-x; 
 
    background-size: 44px 30px, 44px 20px; 
 
    background-position: 8px 0px; 
 
    border-top: 2px solid rgba(0,0,0,0.25); 
 
}

<div class='bg-pattern'></div>

---

以下片段中添加到您的代碼相同的模式：

.module { 
 
    background: white; 
 
    border: 1px solid #ccc; 
 
    margin: 3%; 
 
} 
 
.module > h2 { 
 
    padding: 1rem; 
 
    margin: 0 0 0.5rem 0; 
 
} 
 
} 
 
.module > p { 
 
    padding: 0 1rem; 
 
} 
 
.stripe-6 { 
 
    color: black; 
 
    height: 50px; 
 
    background-color: rgb(115, 199, 192); 
 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25) 6px, transparent 6px), linear-gradient(to right, transparent 12px, rgba(0, 0, 0, 0.25) 12px, rgba(0, 0, 0, 0.25) 14px, transparent 14px, transparent 20px, rgba(0, 0, 0, 0.25) 20px, rgba(0, 0, 0, 0.25) 22px, transparent 22px, transparent 28px, rgba(0, 0, 0, 0.25) 28px, rgba(0, 0, 0, 0.25) 30px, transparent 30px, transparent 36px, rgba(0, 0, 0, 0.25) 36px, rgba(0, 0, 0, 0.25) 38px, transparent 38px); 
 
    background-repeat: repeat-x; 
 
    background-size: 44px 30px, 44px 20px; 
 
    background-position: 8px 0px; 
 
    border-top: 2px solid rgba(0, 0, 0, 0.25); 
 
}

<div class="module"> 
 
    <h2 class="stripe-6">Vertical</h2> 
 
    <p>You could do some schenigans where you have a big rotated element within this header area (with hidden overflow) that has these stripes. That way you could get away with not using repeating-linear-gradient.</p> 
 
</div>