JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div class="wrappper">
        <nav class="top-menu">
          <a href="#">Главная</a>
          <a href="#">Главная</a>
          <a href="#">Главная</a>
          <a href="#">Главная</a>
        </nav>
        <div class="clear"></div>
        <nav class="bottom-menu">
            <a href="#">О нас</a>
            <a href="#">О нас</a>
            <a href="#">О нас</a>
            <a href="#">О нас</a>
        </nav>
    </div>
</header>

CSS

.clear { clear:both; height:0; font-size:0; line-height:0; }
header {
    overflow: hidden;
}
.wrappper { 
    width: 500px;
    margin: 0 auto;
}
.top-menu {
    height: 28px;
    position: relative;
}
.bottom-menu a,
.top-menu a {
    float: left;
    padding-bottom: 5px;
    margin: 0 10px 0 0;
}

.bottom-menu {
    height: 28px;
    float: right;
    position: relative;
    padding: 10px 0 0 10px;
    background: red;
}
.top-menu:after,
.bottom-menu:after {
    content: '';
    position: absolute;
    width: 10000px;
    height: 100%;
    left: 100%;
    top: 0;
    background: red;
}
.top-menu:after {
    left: auto;
    right: 100%;
    margin: 0 40px 0 0;
}
.top-menu:before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: -40px;
    top: 0;
    border-top: 28px solid red; 
	border-right: 28px solid transparent; 
}
.bottom-menu:before {
    content: '';
    width: 0;
    height: 0;
    border-bottom: 38px solid red; 
	border-left: 28px solid transparent;
    position: absolute;
    left: -28px;
    bottom: 0;
}