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

Question

我正在尝试根据图片创建蓝色背景：带有倾斜部分的多个 css 背景

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

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

您知道如何将这些连接在一起以实现图像上的结果吗？

标签： cssbackgroundgradient

Answer 1

只需执行以下操作：

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