Curve between second and third <li>

I am trying to figure it out, how to get curve border on the bottom between two <li>, I added pseudo for this, but cant figure it out, what to do next. I added background color for <ul> to see what I want to achieve, also added comments to know which line to comment or uncomment to see. For now, it has grey square between second and third <li>. Would appreciate any help. https://codepen.io/aurasp/pen/yLGNyXa
12 Replies
Chooβ™šπ•‚π•šπ•Ÿπ•˜
It is very unclear what you are trying to achieve. I'm not even sure if what I saw on Codepen is already what you are trying to achieve and you just want some alternative way to do it. A drawing would be easier to understand.
Como
Comoβ€’15mo ago
can i send a photo?
Chooβ™šπ•‚π•šπ•Ÿπ•˜
Not directly to me. Post it here.
Como
Comoβ€’15mo ago
i have created full prototype for my nav, i cansend photo of course!
Como
Comoβ€’15mo ago
No description
Como
Comoβ€’15mo ago
see those curves on the bottom in between? I am trying to figure it out how to create this effect
Chooβ™šπ•‚π•šπ•Ÿπ•˜
That looks like a border radius with the items shifting left a bit to cover part of the right side of the preceding item.
Como
Comoβ€’15mo ago
yes, i can add that border-radius, but this is what i get:
No description
Chooβ™šπ•‚π•šπ•Ÿπ•˜
You didn't shift them left to overlap.
Como
Comoβ€’15mo ago
ohhhh!! I didnt think about that is there any other way to shift them without using position or grid?
Chooβ™šπ•‚π•šπ•Ÿπ•˜
Negative margin or transform: translate. https://codepen.io/chooking/pen/ZEVGbKg
Como
Comoβ€’15mo ago
great! Now i have to finish adding that curve to the last link. Thank you! I will tag this as solved
Want results from more Discord servers?
Add your server