问题
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