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

do not just share a description of your problem. Also show what you have tried to achieve this — Mihai T, Sep 24 '19 at 10:57
An easy way to see this is to look at the code of the site you are trying to copy. Use the developer tools in your browser to have a look at their solution. — JasperZelf, Sep 24 '19 at 11:04

JasperZelf · Accepted Answer · 2019-09-24T11:39:00.233

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>

score 0 · Answer 2 · answered Sep 24 '19 at 11:09

The alternative that I fast found to you is creating a white square like .hover-top-white on my code and add a quarter of circle div with the same background colour over the white to simulate de curve. See the code:

.menu {
 background-color: purple;
 width: 400px;
 height: 100vh;
 border-radius: 0 50px 50px 0;
 position: relative;
}
.hover {
 width: 350px;
 height: 100px;
 position: absolute;
 right: 0;
 top: 120px;
 display: flex;
 justify-content: flex-end;
}
.hover-top-cut {
 width: 50px;
 height: 50px;
 background-color: purple;
 border-radius: 0 0 50px;
 position: absolute;
 top: -50px;
 rihgt: 0;
 z-index: 3;
}
.hover-top-white {
 width: 50px;
 height: 50px;
 background-color: white;
 position: absolute;
 top: -50px;
 rihgt: 0;
}
.hover-mid {
 width: 100%;
 height: 60%;
 background-color: white;
 border-radius: 50px 0 0 50px;
}
.hover-bottom-cut {
 width: 50px;
 height: 50px;
 background-color: purple;
 border-radius: 0 50px 0 0;
 position: absolute;
 bottom: -10px;
 rihgt: 0;
 z-index: 3;
}
.hover-bottom-white {
 width: 50px;
 height: 50px;
 background-color: white;
 position: absolute;
 bottom: -10px;
 rihgt: 0;
}

<div class="menu">
 <div class="hover">
  <div class="hover-top-cut"></div>
  <div class="hover-top-white"></div>
  <div class="hover-mid"></div>
  <div class="hover-bottom-cut"></div>
  <div class="hover-bottom-white"></div>
 </div>
</div>

Of course, you can use some different ways to align instead of flexbox and position absolute. But I focused just on he curve.

This requires a lot of extra divs. You can compact the "inverted" corners to a single element if you use this trick: https://stackoverflow.com/questions/4012085/invert-rounded-corner-in-css Than it's only 3 divs you need, which can be achieved with a :before and :after. — JasperZelf, Sep 24 '19 at 11:25

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

2 Answers2

Linked

Related