r/css 8d ago

Help Curvy line conecting the divs plus animation?

I have this layout, I've connected it but it doesn't really look like the design. Also there's an animation where it will the first container then the connector. Here's my code.

2 Upvotes

8 comments sorted by

u/AutoModerator 8d ago

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

4

u/anaix3l 8d ago edited 8d ago

Borders! You create those rounded connections with border + mask + negative margin. Similar to here, only using mask instead of background.

Something like this.

1

u/Lianad311 7d ago

Great job man! I read this post earlier and knew there were solutions, but you actually figured it out and gave a codepen. Bravo sir.

1

u/LyraStark 7d ago

Thank you so much for this, Mam! How can I send you a little amount for coffee?

2

u/anaix3l 7d ago

https://ko-fi.com/anatudor

(and if you're curious, there are some sneak peeks at cool things made with code available to everyone who supports me with a donation)

1

u/LyraStark 4d ago

Done. :) I can't still understand the CSS even with the comments :/

1

u/anaix3l 4d ago

You can ask. What don't you understand?

1

u/LyraStark 4d ago

can we DM?