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

问题

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

回答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>

回答2:

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.

来源：https://stackoverflow.com/questions/58078627/how-do-i-achieve-outward-curve-for-active-sidebar-item-using-pure-css