是否有可能在一个div上将两个合并为css中的线性梯度

Question

我想使用CSS进行以下操作

See Resultant Image

到目前为止，我已经使用重复线性梯度制作了水平线

.pattern1{
  width: 100%;
  height: 250px;
  background:repeating-linear-gradient(to bottom, white, white 40px, black 3px, black 43px)
}

<div class='pattern1'/>

但是我需要使用CSS在同一div内添加30px的左垂直线。

这里是小提琴链接

Answer 1

是

.pattern1{
  height: 250px;
  background:
    linear-gradient(red,red) left/30px 100% no-repeat,
    repeating-linear-gradient(to bottom, white 0 40px, black 0 42px)
}

<div class='pattern1'/>