How do I achieve outward curve for active sidebar item using pure CSS

Question

I have been learning frontend end designs for the past week and I was trying to replicate a design I saw on dribble but I've been having a hard time replicating the active style on the sidebar cause of the outward curve.

I'd be glad if anyone can help me out with how it can be achieved.

I have been able to achieve other things except for the outward curves on the active sidebar item.

I am unable to post a picture because my reputation is less than 10 so I have added a link to the design

https://cdn.dribbble.com/users/1192538/screenshots/6973301/flight_web1.png

Answer 1

The tricky part is the "inverted" corners on the right. This can be solved with a radial-gradient background in a :before and :after element.

A radial-gradient is normally used for a gradual transition from one color to another. However, we can manipulate it in such a way that we have a "sharp" line between white and blue in this case. To do this you make sure that the px value for blue and white are very close together.

background: radial-gradient(circle at top left, blue 10px, white 11px);

I made the effect on the :hover state here, but you could add a class to your active list item and do the magic on there.

.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>