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 >
