Split diagonally div in 3 divs

Trying to achieve something as the image suggests, and not sure what would be the best approach because I want to play with the divs heights when hovering.

html

css

.container{ width: 100%; height: 100vh; overflow: hidden; // transform: skewY(-45deg); // transform: rotate(-45deg);
}
.top, .bottom { width: 100%; height: calc(50% - 20px);
}
.top { background: black;
}
.bottom { background: grey;
}
.center { background: green; height: 40px; width: 100%;
}

In the jsfiddle you will find both rotate and skewY commented.