How to make the background of a web page in the form of a triangle?

Question

css

There is a landing page PSD layout that has almost the entire background of a solid color. Let's say #fff colors.
But somewhere in the middle of this layout, there is a geometric figure in the background in the form of a wide inverted triangle. Moreover, the base of the triangle is directed to the site header, and the top to the site footer.
A simple background for a landing page is easy to draw. Like this:

html {
    background: #fff
}

But how do you define an inverted triangle with CSS? Putting it as an image is not an option. Is it possible to define a triangle with CSS style rules? Thanks in advance.

Answer 1

Putting it as an image is not an option

Why? png or svg will be extremely small. This is a great option.

Answer 2

The triangle pseudo-element, and z-index: -1
But the body background must be transparent, otherwise you won't see what's underneath.
https://jsfiddle.net/dhy1xdcx/

Answer 3

You can set gradients: https://codepen.io/SagePtr/pen/rdgeNP?editors=0100
(for example, gradients from yellow to red for clarity, but it is quite possible to replace from white to white, and the background will become uniform, but with a hole in the middle in the form of a triangle)