是否有可能将两个线性梯度结合在css中的单个div上？

Question

我想用css做以下内容

查看结果图片

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

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

<div class='pattern1'/>

但我需要在同一个div内用css添加30px的左竖线。

下面是一个小游戏的链接

Answer 1

是的，是的

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

<div class='pattern1'></div>

或者像下面这样。

.pattern1{
  height: 252px;
  background:
    linear-gradient(to right, red 30px, transparent 0),
    repeating-linear-gradient(to bottom, white 0 40px, black 0 42px)
}

<div class='pattern1'></div>