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.