Cajas en forma de burbuja

El truco que muestra Martin Ivanov es muy simple y nos ayuda a crear una caja de diálogo en forma de burbuja utilizando sólo CSS. La idea funcionará incluso en Internet Explorer 8 aunque, claro, en ese caso, sin los bordes redondeados.

Suspendisse hendrerit tempus tellus sed bibendum. Aenean sed diam ipsum, et hendrerit massa.

Por ejemplo, creamos un DIV al que le ponemos la clase speech-bubble y cuyo contenido, será un texto cualquiera:

<div class="speech-bubble"> ... el texto a mostrar ... </div>

Y claro, lo fundamental es el CSS:

.speech-bubble {
  background: #6495ED; /* el color de fondo */
  color: #FFF; /* el color del texto */
  font-family: Arial, Sans-serif;
  font-size: 12px;
  padding: 20px 10px 10px 10px;
  text-align: center;
  width: 200px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.speech-bubble:after {
  border: solid 10px transparent;
  border-top-color: #6495ED;  /* igual al color de fondo */
  border-bottom: 0;
  bottom: -20px;  /* igual al borde + el padding-bottom de la definición anterior */
  content: "";
  display: block;
  height: 0;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 0;
}