JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="top"></div>
  <div class="center">
  </div>
  <div class="bottom"></div>
</div>

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%;
    //position: absolute;
    //top: 50%;
    //transform: skewY(-45deg) translateY(-50%);
    //z-index: 1;
}