CSS背景三角形3种颜色

Question

我想为HTML5部分创建一个CSS背景，它应该如下所示：

css triangle：

我已经研究并尝试过变换偏斜或边界操作等内容。但我无法像我想的那样真正实现这一观点。 这里有CSS专家吗？会好的。 ps - 如果存在bootstrap解决方案也会帮助我。

迎接

托拜厄斯

Answer 1

使用linear-gradient

* {
  margin: 0;
  psdding: 0;
  }
div {
  height: 100vh;
  width: 100vw;
  background-color: blue;
  background-image: linear-gradient(10deg, lightblue 50%, transparent 50%), linear-gradient(-60deg, brown 30%, transparent 30%);
  }

<div>
  </div>