How to create a split background color layout in pure CSS

Question

I'm trying to create a footer for a site that has this split color design, where's there's two triangles almost overlapping one another. Any ideas would be greatly appreciated!

Thanks!

I attempted something like this:

    background: linear-gradient(120deg, #ba5459 48%, #97444c 48%);

Answer 1

Its not overlapping triangles its a special CSS property called clip-path which is used to clip the rectangular div into various shapes. Create a div first and then in CSS paste the following property. Play with the values to understand its behavior.

clip-path: polygon(0 24%, 100% 0%, 100% 99%, 0% 100%);

You can learn more about clip path over there.