robohash image acting as kam's profile photo

Tip 019 - Speech Bubbles v1


There's a blog post coming soon. I started writing this and realized I was sliding waaay off into Not-A-Tip Land. So look for that coming probably in a day or two. Here I'm just going to share today's quick attempt at creating a speech bubble effect in CSS. Let's start off with the demo this time.

See the Pen Speech Bubble by Kam Black (@kamblack) on CodePen.

We've got two ingredients here. First up, we have a plain black border on the top and the sides. Secondly, we have an :after pseudo-element using an SVG as a background - which is loosely patched to the bottom to look like the missing bottom border. It works okay-ish. The bottom image that is the crux of the whole thing doesn't appear in IE 11, and in other browsers, if you look closely, you can kinda see where the image and the borders meet isn't perfect. The imaged border gets a tad blurry. But more most intents and purposes this works great.

Buuuut I can do better. To get a vibe of where I'm eventually trying to go with this, check out that blog post coming soon. In the meantime, there's another tip coming tomorrow.


Have you written a reply on another site? Put the URL here: