CSS 具有多个渐变和倾斜部分的背景

Question

我正在尝试根据图片创建蓝色背景：multiple css backgrounds with skewed part

到目前为止，我能够完成倾斜渐变部分或渐变本身。

background: linear-gradient(170deg, #031085 80%, #fff 80%); // skew
background: linear-gradient(90deg, #031085 10%, #0F69EF 80%); // linear

你知道如何将它们连接在一起以获得图像上的结果吗？

Answer 1

css 上没有多重渐变背景。如果你愿意，你可以在背景上添加多个选项例如：

  background: 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}

有关更多详细信息，您可以查看此来源：https://css-tricks.com/css-basics-using-multiple-backgrounds/

或者

您可以添加两个堆叠的 div 标签，您可以为它们分配div相同的背景

<div class="background1"></div>
<div class="background2"></div>

Answer 2

只需像下面这样：

html {
  height:100%;
  background: 
    linear-gradient(170deg, transparent 80%, #fff 80%),
    linear-gradient(90deg, #031085 10%, #0F69EF 80%)
}

CSS 具有多个渐变和倾斜部分的背景

CSS background with multiple gradients and a skewed part

css

gradient

background