:: Estilos CSS. Cómo crear un bocadillo

Para crear un "bocadillo", mensaje al estilo de un cómic podemos realizarlo utilizando estilos CSS.

Los estilos que debemos aplicar sobre una capa para que esta tenga el aspecto de un "bocadillo", son los siguientes:
.bocadillo{

.bocadillo{
 border-radius: 30px;
 background-color: #808080;
 color: #fff;
 padding: 30px;
 width: 300px;
 font-family: 'Trebuchet ms';
 font-size: 1em
}
.bocadillo:before {
 content:"";
 position: absolute;
 width: 0;
 height: 0;
 border-top: 20px solid #808080;
 border-left: 18px solid transparent;
 margin: 68px 0 0 250px;
}

El código fuente completo es el siguiente:

< html lang="es" >
< head >

< title >Bocadillo (mensaje)< /title >
< style >
.bocadillo{
 border-radius: 30px;
 background-color: #808080;
 color: #fff;
 padding: 30px;
 width: 300px;
 font-family: 'Trebuchet ms';
 font-size: 1em
}
.bocadillo:before {
 content:"";
 position: absolute;
 width: 0;
 height: 0;
 border-top: 20px solid #808080;
 border-left: 18px solid transparent;
 margin: 68px 0 0 250px;
}
< /style >
< /head >
< body >
 < div class="bocadillo" >
 Mensaje de texto dentro de un bocadillo al estilo cómic.
 < /div >
< /body >
< /html >