JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navi">
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
</ul>

CSS

.navi{
list-style:none;
    margin-top:40px;
}

.navi li{
float:left;
}

.navi li + li{
margin-left:-60px;
}
.navi li a{
background:#000;
    padding:0px 40px;
    line-height:40px;
    display:block;
    color:#fff;
    -moz-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}