CODEWITHSUNDEEP
csshtmltwitter-bootstrap-3background
Tobias
Tobias

Reputation: 95

CSS Background Triangle 3 colors

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

css triangle:

css triangle

I have already researched and tried stuff like transform skew or border manipulation. But i can t really achieve the view like i want to. Is any CSS pro here ? Would be nice. ps - if a bootstrap solution exists would also help me.

Greets

Tobias

Upvotes: 6

Views: 5946

Answers (1)

Andrei Fedorov
Andrei Fedorov

Reputation: 3977

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

Upvotes: 14

Related Questions