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
No description
3 Replies
MarkBoots
MarkBoots14mo ago
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
Como
Como14mo ago
I just needed to complete that last curve, but you fix my whole css. Thank you! It works! Perfect!
MarkBoots
MarkBoots14mo ago
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
Want results from more Discord servers?
Add your server