Curve in the end for the last navigation link
SUMMARY: I have an idea to add a small curve to each link at the bottom, but I'm facing an issue with the last one. I added a background image to the body tag, and this is where the problem arises.
PROBLEM: Green section that should be transparent. However, when I add transparency, the curved effect disappears (due to the negative margin-left).
TRIED: I attempted to use a border-left, but it didn't work.
GOAL: Is there a way to add that green section while maintaining the curved effect?
Thank you in advanced!
I will attach codepen:
https://codepen.io/aurasp/pen/yLGNyXa
Also, the image of those curves
3 Replies
something like this could work. I'm adding a pseudo element with a radial gradient to the last menu item and decreased the padding on the right side. Also used some custom properties and calculations so you can adjust sizes it easily
https://codepen.io/MarkBoots/pen/LYMBzaw
I just needed to complete that last curve, but you fix my whole css. Thank you! It works! Perfect!
no problem, you're welcom.
If you want to keep the code for later reference, make sure you copy or fork it. I will remove the pen later