Image free comment pointers with CSS

You could of course hassle with some images. But images take time to load and are difficult to get right. You could alternatively resort to drawing on a canvas. But why use images or a canvas if you can use CSS? Luckily others have laid the groundwork:

1. Tantek Celik has worked out how to draw polygons with CSS: http://tantek.com/CSS/Examples/polygons.html. - That's nice, our desired pointer is a triangle.
2. The filament group has shown how to use this for tooltips: http://www.filamentgroup.com/lab/image_free_css_tooltip_pointers_a_use_for_polygonal_css/. - Almost there, but with the pointer above or below rather than to the left.

Let's break down how it's done.

The comment box

First, simply the box with some nice CSS3 box-shadow (which is of course optional):

The first triangle

Second, we add a triangle in the color of the box's border: How is the triangle done? If you have an element with a border, there is a diagonal line where the border lines meet in the corner. Keep the bordered element's width and height zero. If one line is white and both border lines are several pixels big, you will have a classic right-angled triangle. If a top and a bottom corner meet, you have a pointer triangle. We can see how it works if we enlarge the triangle's div and make the top and bottom border red instead of white:

The second triangle

Third, we add another smaller white triangle to cover the first triangle such that only the illusion of a bordered triangle, our desired pointer, remains:

The code

The HTML for this is:

<div class="commentp" style="float:left;">
	<div class="comment-body">
		This blog is awesome!<br />
		Keep up the good work.
	</div>
	<div class="commentp-pointer-left ui-widget-header">
		<div class="commentp-pointer-left-inner">
		</div>
	</div>
</div>

And this is the CSS: