First of all, the styles:

.comment-pointer {
 border-top: 25px solid #fff;
 border-left:25px solid transparent;
 }

You can add more, but that’s basically the key to things. It’s all in the borders, and unlike the many tutorials and blog posts I’ve read recently, I’m actually going to tell you how it works.

It looks like a triangle, but it's really a box with a weird diagonal border effect.

I just finished a basic redesign of my running blog. For the comments, I became attached to the idea of having dialogue bubbles… because yeah, I love comic books. After consulting Google and a steaming pile of not-very-helpful blog posts and so-called “tutorials”, I finally found a way to get the active code without all the extra stuff. I didn’t want to make it orange just like that other guys, I wanted to know why the triangle was being formed.

Finally, I found this YouTube page. If you decide to watch it, be ready to skip forward. I mean, a lot. Most of the video is eaten up by the guy slowly typing out lines of code, and he speaks as though he could fall asleep at any moment. However, he was very helpful. After skipping forward through the entire vid, he finally said the magic words: “It’s just a box.”

Kind of not-very-similar to this bamboo picture frame. Sort of.

The Trick of the Triangle is in the way borders work. They aren’t just lines on the sides. Their origin points are on diagonal corners. I know that sounds weird, but think of it as a picture frame. the imaginary center line of the border goes from one diagonal corner to another, so it seems to lean over if you give it an insane thickness.

The best way to test this is to just open up a page that’s using the technique and play around with things in Firebug. If you hold down the arrow key with the border thickness selected, you can see the triangles form.

Colors are Important

The end result of this effect is to create a box with two colors in it, separated on a diagonal line. To get the triangle effect, you have to nix the color on one side of it. Don’t just set it to the same color as the background. One of these days you might change that, and you would have all these crazy little triangles floating around. Set it to transparent, as I have above.

So there you are. CSS Speech Bubbles. If you’d like to see an example, you can find it in one of my race reviews. Happy Firebugging!