CSS背景三角形3种颜色

Question

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

css三角形:

我已经研究过并尝试了变换偏斜或边界操作等内容.但我无法像我想的那样真正实现这一观点.这里有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>