How to create a diagonal background effect, using CSS

Question

Is it possible to create the effect shown in the following image, using CSS?

Basically I want to create <div> s that have a background split diagonally with a block color on side and white on the other?

Answer 1

You can use linear-gradient on background . See the following example:

 body { height:100vh; width:100vw; background:linear-gradient(160deg, red, red 60%, white 60%, white); }