很確定這可能與CSS3,但我不知道如何。鑑於這種設計模式使用CSS創建響應式重複各種高度垂直線模式
創建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
);
}
這裏有一個更大,更高對比度的圖像查看模式更好(感謝@馬丁!)
我幾乎看不到什麼的圖片... – martin
感謝超市沒有意識到圖像很難看。我添加了一個更大,更高對比度的圖像,以便您可以看到。 – KillerDesigner