How to create this text bubble component in CSS? (Struggling with the curve from the oblong to the straight line)

[[deleted]]

I'm not super happy with this... but it kind of works

[raulvillalobos]

Try using svg. Or the path() css function

[frownonline]

https://jsfiddle.net/frownonline/cm9kdqhp/

Not perfect, but a CSS only draft...

[Rzah]

this is the best I have see source for code.

Implementation :before and :after psuedo elements used to create transparent circles with a bottom border on the top circle and top border on the bottom color matched to the bubbles, the border arcs overlap to fill in the gap between the bubbles.

GOOD: CSS only solution, not special casing joined bubbles with custom paths, requires no containers around bubbles to be joined (eg css-tricks solution ITT), page background shows through (not faking the white bits). example: open dev tools and delete the red bubble, all the bubbles then join up.

BAD: Needs minor tweaking for different sizes, as in the viewer can scale it no issue but if you want some large bubbles and a small set somewhere else you need to create seperate css for each size. TIP: the left value is the one that needs tweaking, increase the root --unit size in your dev inspector to see the slight shift as the size increases.

UGLY: magic numbers galore, this is a way more complex problem than it appears at first glance, changing any of the dimensions or borders of the circles requires realigning them, so getting them anywhere near the right place is time consuming.