Simulación de un bocadillo de diálogo

Name: Simulación de un bocadillo de diálogo
Brand: Jose Aguilar
SKU: joseaguilarblog-1643
Availability: InStock
Rating: 4 (6 reviews)

Cuando necesitamos incorporar en nuestra Web una ventanita de diálogo o bocadillo de texto no sabemos como hacerlo y se puede hacer muy fácilmente utilizando las técnicas CSS.

Para lograr lo que se muestra en la imagen deberemos tener disponible en nuestras hojas de estilo las siguientes clases CSS:

<style>
.bubble {
    margin: 50px;
    padding: 20px;
    position: relative;
    border-radius: 8px 8px 8px 8px;
    width: 200px;
}
.bubble:after {
    content: "";
    position: absolute;
   top: 100%;
   left: 20px;
   border-top: 20px solid blue;
   border-top-color: inherit;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
}
</style>

Y seguidamente en nuestro <body> tendríamos lo siguiente:

<div class="bubble" style="background: red; border-color: red;">Texto a mostrar en el bocadillo o diálogo</div>

Como vemos en el código CSS tenemos una clase padre llamada «bubble» que contiene los parámetros necesarios para obtener el recuadro con bordes redondeados.

Seguidamente utilizamos herencia en CSS empleando y rellenando la clase «bubble:after» que se encarga básicamente de construir el triángulo que se visualiza por debajo del rectángulo.

En el código HTML simplemente declaramos un div con class=»bubble» y al elmento le asignamos un borde y fondo rojo y dentro del div el texto del bocadillo.

Ver el ejemplo en funcionamiento