JSFiddle - React, Tailwind, and code Playground

HTML

<div class="down">
  <div class="menu">
    <ul>
      <li><a href="">Первый</a></li>
      <li><a href="">Второй</a></li>
      <li><a href="">Третий</a></li>
    </ul>
  </div>
</div>
<div class="up">

</div>

CSS

.down{
  border: 1px solid transparent;
  background-color: #f99;
  height: 400px;
}
.menu{
  margin-top: 30px;
  height: 50px;
  background-color: #f84;
}
.menu > ul{
  width: 70%;
  margin-left: 30%;
}
.menu > ul > li{
  display: inline-block;
}
.up{
  transform: skewX(45deg);
  width: 100%;
  margin-left: -50%;
  margin-top: -402px;
  border: 1px solid transparent;
  background-color: #7f7;
  height: 400px;
}