JSFiddle - React, Tailwind, and code Playground

by Dwza

HTML

<ul>
    <li>ich bin ein li element</li>
</ul>

CSS

li{

    list-style: none;
    width:220px;
    line-height:50px;
    position:relative;

    text-align:center;
    margin: 0px;
}
li:hover{
    background: red;
}

li:after, li:before{
    content:"";
    position:absolute;
    width:20px;
    height:50%;
    left:100%;
}
li:hover:before{
      top:0;
    background: linear-gradient(to right top, red 50%, transparent 50%);
}
li:hover:after{
    bottom:0;
    background: linear-gradient(to right bottom, red 50%, transparent 50%);
}