Contenedor con forma de Burbuja

CSS3 Logo

Este código nos sirve para crear un contenedor con forma de burbuja el cual podemos usarlo para poner notas, avisos o citas en nuestro blog.

El HTML.
[html]
<div class="bubble" style="border-color: pink; background: pink;">
<p>Hola Mundo!</p>
</div>
[/html]

Nota que se ha indicado el tag style para cambiar el border y el background del contenedor.
[html]
style="border-color: pink; background: pink;"
[/html]

El CSS.
[css]
.bubble {
margin: 50px;
padding: 50px;
position: relative;
}
.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;
}
[/css]

Recomendado