是否有可能将 css 中的两个线性梯度组合到单个 div 中

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 的左垂直线

这里是fiddlelink

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>

是否有可能将 css 中的两个线性梯度组合到单个 div 中

Is it possible two combine two linear gradient in css over single div

css

background

linear-gradients