Crear Bocadillos en CSS

Gracias a CSS podemos implementar capa y estilos CSS3 como los típicos globos de historietas o bocadillos de cómic.

archivo.css

 
#bocadillo{
	border-radius: 5px;
	background-color: chocolate;
	color: floralwhite;
	padding: 10px;
	width: 120px;
}

#bocadillo:before {
	content: "";
	position: absolute;
	width: 0;
	left: -61px;
	top: -6px;
	height: 0;
	border-top: 20px solid transparent;
	border-right: 30px solid #d2691e;
	border-bottom: 20px solid transparent;
	margin: 10px 0 0 32px;
}

archivo.html

 

 
<div id="bocadillo">
Probando el bocadillo o "globo de hablar", o como le llames.
</div>

Ejemplo

Probando el bocadillo o “globo de hablar”, o como le llames.

Bocadillo en CSS con el triángulo a la Derecha

 
#bocadilloTrianguloDerecha{
	border-radius: 5px;
	background-color: chocolate;
	color: floralwhite;
	padding: 10px;
	width: 120px;
}

#bocadilloTrianguloDerecha:before {
	content: "";
	position: absolute;
	width: 0;
	left: -61px;
	top: -6px;
	height: 0;
    border-left: 30px solid #d2691e;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
	margin: 10px 0 0 32px;
}

Ejemplo

Probando el bocadillo o “globo de hablar”, o como le llames.

Generadores de bocadillos css

Herramienta para la creación de bocadillos en CSS.

¿Te ha resultado útil?

5 (100%) 2 votes

Deja un comentario