CSS Background Triangle 3 Colors

Question

I want to create a CSS background for an HTML5 section, and it should look like this:

css triangle:

I have already researched and tried things like transforming or manipulating borders. But I really can’t reach such an opinion as I want. Any CSS professional here? It would be great. ps - if there was a bootstrap solution, it would also help me.

greets

Tobias

Answer 1

Use 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>

Run codeHide result