Here is a code example that you can use to a create a css triangle or arrow, whatever you want to call it, just by playing with the css border property.

If you need a border arround your box, no worries, you just need to add a second triangle and play with it’s position, you can see it on the second box.

See the Pen npBbr by Rodolfo Caldeira (@rodolfocaldeira) on CodePen

Please find below more examples about you can achieve with css

• CSS Arrow Please
• CSS3 Shapes
• Shapes of CSS

If you want to understand how this css border trick works you should check this article.

Update 2013-10-20

Mr. Chris Coyer did it again, here is a lovely animation that explains exactly how the css triangles work - CSS Tricks - Animation CSS Triangles.