JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
    <li href="">showcase</li>
    <li href="">services</li>
    <li href="">studio</li>
    </ul>
</nav>

CSS

nav {
    position: relative;
    background: lime;
    width: 100%;
    height: 30px;
    overflow: hidden;
    -x-webkit-clip-path: polygon(0% 30px, 100% 30px, 100% 0%, 30px 0%);
    /*Chrome,Safari*/
    -webkit-clip-path: url('http://dev.bits.com/media/clip.svg');
    
    /* Firefox*/
    clip-path: url('http://dev.bits.com/media/clip.svg#svgClip');
    
    /* iOS support */
     -webkit-mask: url('http://dev.bits.com/media/clip.svg');
}

nav:before {
    content: url(http://dev.bits.com/media/slash-transparent.svg);
    position: absolute;
}

body {
    background: url(http://lorempixel.com/600/600/);
}

nav:hover ul {
    margin-left: 100px;   
}

ul {
    background: lime;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    margin-left: -100%;
    transition: all 0.5s linear;
}
ul li {
    list-style: none;
    float: left;
    color: white;
    padding-right: 20px;
    height: 100%;
    line-height: 25px;
}