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:
Let's break down how it's done.
First, simply the box with some nice CSS3 box-shadow (which is of course optional):
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:
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 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: