 <p>It is only with borders. When you see arrows like this, the developer most likely used pseudo elements to create them. Basically what happens is you create a transparent box without content, and since there is nothing there, all you see is the one corner of the border. This conveniently looks just like an arrow.</p> <p>How to do it:</p> <pre><code>.foo:before { content: ' '; height: 0; position: absolute; width: 0; border: 10px solid transparent; border-left-color: #333; } </code></pre> <p><a href="http://jsfiddle.net/fGSZx/">http://jsfiddle.net/fGSZx/</a></p> <p>Here are some resources to help:</p> <p><a href="http://css-tricks.com/snippets/css/css-triangle/">CSS Triangle from CSS-Tricks</a> (this should clear everything up)</p> <p><a href="http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/">Smashing Mag article about :before and :after</a></p>