Cómo se hace en CSS un bocadillo de cómic con flecha o un triángulo

Los bocadillos de cómic son fantásticos para mostrar un mensaje de ayuda, un aviso cuando se produce un problema o presentar un tutorial ameno. Son llamativos al igual que agradables. Pero muchos creerán que es obligatorio acabar usando una imagen, es un diseño muy personal. ¡No, con CSS3 es posible!

Con 2 sencillos ejemplos podremos ver como se hace en CSS un bocadillo de cómic con flecha (o triángulo). Aprenderemos, por el mismo precio, a realizar un triángulo usando solo bordes.

Bocadillo cuadrado con flecha centrada

HTML

Nuestro HTML será un div o cualquier elemento de tipo bloque.

<div class="bocadillo-cuadrado"></div>

CSS

La hoja de estilos va a estar dividido en el contenido y la flecha (triángulo) situado en el :before. Al final del articulo te doy una explicación del triángulo.

.bocadillo-cuadrado {
    position: relative;
    height: 200px;
    width: 300px;
    background: white;
    box-shadow: 1px 12px 33px rgba(0, 0, 0, 0.5);
}
.bocadillo-cuadrado:before {
    border: 25px solid white;
    content: '';
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    position: absolute;
    bottom: -48px;
    left: calc(50% - 25px)
}

¿Necesitas la versión SASS del ejemplo?

$color-bocadillo: white
.bocadillo-cuadrado
    position: relative
    height: 200px
    width: 300px
    background: $color-bocadillo
    box-shadow: 1px 12px 33px rgba(0, 0, 0, 0.5)
    &:before
        border: 25px solid $color-bocadillo
        content: ''
        border-left-color: transparent
        border-bottom-color: transparent
        border-right-color: transparent
        position: absolute
        bottom: -48px
        left: calc(50% - 25px)

Bocadillo redondo estilo cómic

HTML

Repetimos el mismo código.

<div class="bocadillo-redondo"></div>

CSS

La diferencia radica en que hemos usado box-shadow para darle la redondez y que hemos desplazado a una esquina la flecha. Por el resto es igual.

.bocadillo-redondo {
    position: relative;
    height: 150px;
    width: 300px;
    background: white;
    border-radius: 50%;
    box-shadow: 1px 12px 33px rgba(0, 0, 0, 0.5);
}
.bocadillo-redondo:before {
    border: 25px solid white;
    content: '';
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    position: absolute;
    bottom: -44px;
    right: 75px;
    transform: rotate(-8deg);
}

Y aquí la versión de SASS por si te fuera más cómodo de usar.

$color-bocadillo: white
.bocadillo-redondo
    position: relative
    height: 150px
    width: 300px
    background: $color-bocadillo
    border-radius: 50%
    box-shadow: 1px 12px 33px rgba(0, 0, 0, 0.5)
    &:before
        border: 25px solid $color-bocadillo
        content: ''
        border-left-color: transparent
        border-bottom-color: transparent
        border-right-color: transparent
        position: absolute
        bottom: -44px
        right: 75px
        transform: rotate(-8deg)

¿Como se hace un triángulo en CSS?

Forzando a que todos los lados, salvo uno, tengan un color transparente lograremos un trapecio. Al aumentar su tamaño llegará un momento en que se quede sin cabeza evolucionando a un triángulo.

Veamos los pasos.

1) 4 bordes.

2) 3 bordes transparentes y uno visible.

3) Aumentamos el tamaño.

¡Ya lo tenemos!

Si les ha gustado, dejen un comentario.