The challenging aspect lies in the creation of the "inverted" corners on the right side. This can be achieved by utilizing a radial-gradient background within a :before and :after element.
A radial-gradient is typically used to create a smooth transition between two colors. However, with some manipulation, we can produce a distinct boundary line between white and blue in this scenario. To accomplish this, ensure that the pixel values for the blue and white colors are very close together.
background: radial-gradient(circle at top left, blue 10px, white 11px);
I have implemented this effect on the :hover state here, but you also have the option to add a class to your active list item and apply the styling there instead.
.menu{
list-style-type: none;
background: blue;
width: 200px;
border-radius: 20px;
padding: 30px 0 30px 30px;
}
.menu li{
position: relative;
padding: 5px;
border-radius: 10px 0 0 10px;
}
.menu li:hover{
background: white;
}
.menu li:hover:after,
.menu li:hover:before{
content:'';
position: absolute;
width: 10px;
height: 10px;
right: 0px;
}
.menu li:hover:after{
top: -10px;
background: radial-gradient(circle at top left, blue 10px, white 11px);
}
.menu li:hover:before{
bottom: -10px;
background: radial-gradient(circle at bottom left, blue 10px, white 11px);
}
Hover over menu items to see the effect
<ul class="menu">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>