Truco CSS: Construir flechas en los contenedores HTML

Muchas experimentos hemos vistos en DesarrolloLibre que se pueden hacer con CSS; en DesarrolloLibre hemos visto varios experimentos empleando selectores y propiedades para tener el efecto deseado.

¿A qué nos referimos cuando hablamos de flechas en los contenedores?; bueno, una imagen vale más que mil palabras:

Es una bifurcación que se coloca a un contenedor; son ideales para menús emergentes o simplemente para dibujar globos -recuadros- de textos que en sencillas palabras es colocar flechas en el contenedor con un poco de CSS; flechas para el lado derecho, izquierdo, abajo y arriba con un poquito de HTML y algo de CSS.

Nuevamente propiedad border-width y los selectores :before y :after

Para este pequeño truco CSS usaremos una propiedad ya tratada en la anterior entrada llamada Formas geométricas con CSS (parte 2); en el cual vimos a través de tres ejemplos la versatilidad de la propiedad border-width en conjunto con los selectores :before y :after.

El truco aquí al igual que en la entrada citada anteriormente, es emplear los selectores :before y/o :after para crear "otro contenedor" cerca del contenedor original y darle la forma -con la propiedad border-width- y posición deseada -con las propiedades left, bottom y top-.

Veamos en detalle cómo crear estas flechas en los contenedores.

Flecha en el contenedor arriba e izquierda

.arriba-izquierda:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 0 25px 25px;
    border-style: solid;
    border-color: transparent transparent red;
}

Flecha en el contenedor arriba y derecha

.arriba-derecha:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 50px;
    width: 0;
    height: 0;
    border-width: 0 25px 25px;
    border-style: solid;
    border-color: transparent transparent red;
}

Flecha en el contenedor lado derecho y abajo

.lado-derecha-abajo:before {
      content: "";
      position: absolute;
      top: 50px;
      left: 100px;
      width: 0;
      height: 0;
      border-width: 25px;
      border-style: solid;
      border-color:  transparent transparent transparent red;
}

Flecha en el contenedor lado derecha y arriba

.lado-derecha-arriba:before {
      content: "";
      position: absolute;
      top: 0;
      left: 100px;
      width: 0;
      height: 0;
      border-width: 25px;
      border-style: solid;
      border-color:  transparent transparent transparent red;
}

Flecha en el contenedor izquierda y abajo

.lado-izquierda-abajo:before {
    content: "";
    position: absolute;
    top: 50px;
    left: -50px;
    width: 0;
    height: 0;
    border-width: 25px;
    border-style: solid;
    border-color: transparent red transparent transparent;
}

Flecha en el contenedor abajo e izquierda

.abajo-izquierda:before {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 25px 25px 0;
    border-style: solid;
    border-color: red transparent transparent;
}

Flecha en el contenedor abajo y derecha

.abajo-derecha:before {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50px;
    width: 0;
    height: 0;
    border-width: 25px 25px 0;
    border-style: solid;
    border-color: red transparent transparent;
}

Si estudias un poco los CSS anteriores; te darás cuenta que lo único que varía es la posición en donde se ubica el contenedor con las propiedades top, bottom y left; además según la posición se define el lado al cual aplicarle el borde (border-width) y su color (border-color) y con esto le damos la forma deseada.

También podemos crear flechas sin los contenedores que sean un poco más atractivas, es decir más flechas y menos triángulos y usarlos individualmente en donde desees y parecen pequeños iconos en forma de flecha:

El HTML consta de dos bloques:

<div class="triangulo abajo">
	<div></div>
</div>

El CSS es el siguiente:

.triangulo {
    border-style: solid;
    border-width: 18px;
    width: 0;
    height: 0;
}
.triangulo>div {
    border-style: solid;
    border-width: 10px;
    width: 0;
    height: 0;
    position:relative;
}

.triangulo.derecha{
    border-color: transparent transparent transparent black;
}
.triangulo.derecha>div {
    border-color: transparent transparent transparent white;
    top:-10px;
    left:-21px;
}
.triangulo.izquierda{
    border-color: transparent black transparent transparent;
}
.triangulo.izquierda>div {
    border-color: transparent white transparent transparent;
    top:-10px;
    left:1px;
}
.triangulo.arriba{
    border-color: black transparent transparent transparent;
}
.triangulo.arriba>div {
    border-color: white transparent transparent transparent;
    top:-21px;
    left:-10px;
}
.triangulo.abajo{
    border-color: transparent transparent black transparent;
}
.triangulo.abajo>div {
    border-color: transparent transparent white transparent;
    top:1px;
    left:-10px;
}

El funcionamiento es sencillo, como ves tenemos un contenedor padre que solo costa de borde, definido con el atributo border-width; luego para el div o contenedor interno del div con clase triangulo definimos otro border-width y aparte el color del borde, los cuales pueden ser cuatro; uno para cada lado, que también podemos emplear como uno para cada tipo de flecha (derecha, izquierda, arriba o abajo):

border-color: transparent black transparent transparent;

En el caso anterior solo definimos un color que en este caso es para la flecha izquierda; aunque podemos emplear más de un color por lado para hacer flechas más grandes; finalmente, para hacer ese pico en la cola característico de la flecha y de esta forma convertir un triángulo en flecha, con el contenedor interno a la clase triangulo, creamos otro contenedor más pequeño y lo posicionamos en el centro de la figura:

 top: -10px; left: 1px; 

Por supuesto, cada tipo de flecha tiene su variación y con esto varían algunos atributos así como sus valores; este último experimento o ejemplo fue tomado de esta web: