JSFiddle - React, Tailwind, and code Playground

by teneff

HTML

<ul>
    <li>
        <span class="top"></span>
        <span class="bot"></span>
        <a href="">Home</a>
    </li>
    <li>
        <span class="top"></span>
        <span class="bot"></span>
        <a href="">Page 1</a>
    </li>
    <li>
        <span class="top"></span>
        <span class="bot"></span>
        <a href="">Page 2</a>
    </li>
</ul>

CSS

ul {
    list-style: none;
}
li {
    float: left;
    position: relative;
    padding: 2px 10px;
    text-align: center;
}
li a {
    position: relative;
    padding-left: 15px;
    text-decoration: none;
    font: normal 10px Verdana;
}
li span {
    display: block;
    height: 10px;
    position: absolute;
    width: 100%;
    
    border: 2px solid #333;
}
li:hover span {
    background: green;
}
li span.top {
    top: 0;
    
    transform:skew(30deg,0deg);
    -ms-transform:skew(30deg,0deg); /* IE 9 */
    -moz-transform:skew(30deg,0deg); /* Firefox */
    -webkit-transform:skew(30deg,0deg); /* Safari and Chrome */
    -o-transform:skew(30deg,0deg); /* Opera */
    
    border-bottom: 0;
}
li span.bot {
    bottom: 0;
        
    transform:skew(-30deg,0deg);
    -ms-transform:skew(-30deg,0deg); /* IE 9 */
    -moz-transform:skew(-30deg,0deg); /* Firefox */
    -webkit-transform:skew(-30deg,0deg); /* Safari and Chrome */
    -o-transform:skew(-30deg,0deg); /* Opera */
    
    border-top: 0;
}