使用 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 生成的图案不同，这需要两个线性渐变，因为有两条不同高度和间隙的条纹。

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

使用 CSS 创建响应式重复的各种高度垂直线图案

Create Responsive Repeating Various Height Vertical Line Pattern with CSS

css

linear-gradients