Footer consisting of two right triangles

Question

I\'m making a website and I want the footer to look like this: https://imgur.com/a/JuHHHkM

It\'s basically two triangles on top of each other. I\'ve tried to make tr

Answer 1

You can easily achieve this with gradients:

.footer {
  height:100px;
  background:
   linear-gradient(to bottom right,transparent 49.5%,blue 50%),
   linear-gradient(to bottom left,transparent 49.5%,green 50%);
}

You can also adjust the size if you don't want the triangle to be full width:

.footer {
  height:100px;
  background:
   linear-gradient(to bottom right,transparent 49.5%,blue 50%) right/80% 100% no-repeat,
   linear-gradient(to bottom left,transparent 49.5%,green 50%) left/80% 100% no-repeat;
}