Fancy validation pointer messages without images

Here's a neat little CSS trick that allows you to create validation messages which point to the relevant field without the use of images.

It basically makes use of the CSS border property to make pure CSS shapes. In this case, we make a triangle connected to a rectangle giving you a pleasant arrow shape in which to hold your validation message.

Here's what the effect looks like:

And here's some mark-up for you:

.valPointer {
border-color: transparent #e9e9e9 transparent transparent;
border-style: solid;
border-width: 14px 14px 14px 0px;
height: 0px;
width: 0px;
float: left;
}

.valBody {
background: #e9e9e9;
float: left;
height: 28px;
width: 146px;
font: normal 11px arial;
padding: 0 2px 0 5px;
}

<div id="errorArrow" >
<span class="valPointer"></span>
<span class="valBody">This is mandatory. Please enter a value.</span>
</div>

Good little trick and saves you busting Photoshop open. What do you think? Useful? Would you use it?

Thanks to ChrisM for doing some research on this one for me!