使用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
  );
}

这是一个更大，更高对比度的图像，可以更好地看到模式（感谢@Martin！）

Answer 1

是的，绝对可以使用linear-gradient背景图片创建此模式。与Chris Coyier生成的模式不同，这需要两个线性渐变，因为有两个不同高度和间隙的条纹。

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以下代码段在代码中添加了相同的模式：

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;