JSFiddle - React, Tailwind, and code Playground

by Ratanak Serey

HTML

Hover over menu items to see the effect
<ul class="menu">
  <li><a>one</a></li>
  <li><a>one</a></li>
  <li><a>one</a></li>
  <li><a>one</a></li>
  <li><a>one</a></li>
</ul>

CSS

.menu{
  list-style-type: none;
  background: blue;
  width: 200px;
  border-radius: 20px;
  padding: 30px 0 30px 30px;
}

.menu li{
  position: relative;
  padding: 15px;
  border-radius: 12px 0 0 12px;
}
.menu li a{
  color: white
}

.menu li:hover{
  background: white; 
}

.menu li a:hover{
  color: black;
}

.menu li:hover:after,
.menu li:hover:before{
  content:'';
  position: absolute;
  width: 12px; 
  height: 12px;
  right: 0px;
}

.menu li:hover:after{
  top: -12px;
  background: radial-gradient(circle at top left, blue 8px, white 10px);
}

.menu li:hover:before{
  bottom: -12px;
  background: radial-gradient(circle at bottom left, blue 8px, white 10px);
}