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
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.
can i send a photo?
Not directly to me. Post it here.
i have created full prototype for my nav, i cansend photo
of course!
see those curves on the bottom in between? I am trying to figure it out how to create this effect
That looks like a border radius with the items shifting left a bit to cover part of the right side of the preceding item.
yes, i can add that border-radius, but this is what i get:
You didn't shift them left to overlap.
ohhhh!! I didnt think about that
is there any other way to shift them without using position or grid?
Negative margin or transform: translate.
https://codepen.io/chooking/pen/ZEVGbKg
great! Now i have to finish adding that curve to the last link.
Thank you!
I will tag this as solved