Truco CSS: Construir flechas en los contenedores HTML

- Andrés Cruz

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:

Flechas contenedores ejemplo HTML

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:

Código de CSS - Dibujar una flecha con html y css
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos desde!

10$

En Udemy

Quedan 2d 15:50!


Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!