How to make half-square background in css

Question

Is it possible to make in pure css background for half square like on the image. I know that it can be done with an image as background, but I need to use 5 different colours, and maybe in future the colours can be changed.

Answer 1

You can also try linear-gradient

div {
  width: 200px;
  height: 200px;
  background: rgba(248, 80, 50, 1);
  background:linear-gradient(to bottom right,grey 50%,red 50%);
}

<div></div>