Great to finally see [forgive my split infinitive] a well documented walkthrough on how to create these little bit of magical CSS that add triangular pointers onto your navigation elements – or Talk Bubbles as Stubbornella OOCSS has them – without either images or extra markup (reintroduce the extra markup if you want IE6 & 7 support). It’s the lack of markup that had me confused. Thanks to Nate for explaining what I was missing – CSS psuedo elements, or any gernerated content is not part of the DOM – and hence you cant actually inspect it with any flavour of developer toolbar to see how it’s done.

Zero width and height plus big margins = polygon effects!

Like wow.

Read, straight for the horse’s mouth here: CSS Arrows and Shapes Without Markup .

Last updated on 5th September 2018