JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>1sfd fsdfs</li>
    <li>ыва ыва sdf</li>
    <li> ыва sdf</li>
</ul>

CSS

* {
    margin:0;
    padding:0;
    border:none 0;
}

li {
    display:inline-block;
    background:red;    
}
li:hover {
    background:green;    
}


li:before,
li:after {
    content:"";
    display:inline-block;
    position:relative;
    height:0;
    width:0;
    vertical-align: bottom;    
    border:.65em solid;
    
    border-color:red;
    border-left-color:white;
    border-right-style:none;
}
li:hover:before {
    border-color:green;
    border-left-color:white;
}

li:after {    
    border-color:white;
    border-left-color:red;
    border-right-style:none;
}
li:hover:after {
    border-left-color:green;
}