Pure CSS Speech Bubbles

Recentemente, um projeto de perguntas e respostas em que eu estava trabalhando tinha esses “balões de fala” em torno de cada comentário postado pelo usuário. O código existente fez uso de uma imagem posicionada absolutamente sobre cada div contendo um comentário do usuário.

Isso não é jeito de viver.

Acabei usando uma técnica desenvolvida por Nicholaas Galahger para conseguir o mesmo efeito usando apenas CSS.

Basta aplicar uma única classe ao elemento que você deseja embrulhado em um balão de fala, assim:

<p class="triangle-border right">The entire appearance is created only with CSS.</p>

Há uma variedade de estilos para se adequar a muitos tipos de aplicação, ou dinheiro com o próprio CSS, é direto e extremamente bem comentado.

http://nicolasgallagher.com/pure-css-speech-bubbles/demo/