Truco CSS: Construir flechas en HTML

Construir flechas HTML es uno de esos trucos que parecen simples, pero que esconden mucha más profundidad de la que aparentan. A lo largo del tiempo, experimentando con CSS, he comprobado que la mayoría de las flechas que vemos en la web no son imágenes, sino el resultado de jugar con bordes, pseudo-elementos y un poco de posicionamiento.

En esta guía te voy a mostrar todas las formas reales de crear flechas en HTML, desde las más sencillas con entidades, hasta flechas avanzadas con CSS y SVG, explicando cuándo conviene usar cada una.

Antes vimos como crear formas geométricas con CSS.

Qué significa construir flechas en HTML

Cuando hablamos de construir flechas en HTML, no nos referimos solo a mostrar un símbolo → en pantalla. En la práctica, las flechas se usan para:

• Indicar direcciones
• Guiar al usuario en la navegación
• Complementar contenedores (tooltips, globos de texto)
• Crear botones de avanzar/retroceder
• Reforzar jerarquía visual

El error más común es pensar que todas las flechas deben ser iconos o imágenes, cuando en realidad HTML y CSS ofrecen soluciones más ligeras, flexibles y fáciles de mantener.

¿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.

Formas de crear flechas en HTML (visión general)

Antes de entrar al detalle, estas son las opciones disponibles:

1. Entidades HTML / Unicode → simples y rápidas
2. CSS puro → flechas sin imágenes usando bordes
3. Flechas CSS en contenedores → tooltips y globos
4. SVG → flechas complejas o animadas
5. HTML + CSS + JavaScript → navegación interactiva

La clave está en elegir el método correcto según el contexto, no en usar siempre el más complejo.

Flechas usando entidades HTML (la opción más simple)

Las entidades HTML son la forma más rápida de añadir flechas a un texto. Funcionan igual que otras entidades conocidas como © o π.

Flechas básicas izquierda, derecha, arriba y abajo

Algunos ejemplos habituales:

• Flecha derecha: → →
• Flecha izquierda: ← ←
• Flecha arriba: ↑ ↑
• Flecha abajo: ↓ ↓
• Flecha doble derecha: ⇒ ⇒

Ejemplo en HTML:

<p>Mover a la derecha &rarr; siguiente paso</p>

Este enfoque es ideal cuando solo necesitas indicar dirección dentro de un texto, sin estilos especiales.

Cuándo usar entidades HTML y cuándo no

Usa entidades si:

• La flecha forma parte del texto
• No necesitas estilos personalizados
• Buscas máxima compatibilidad

Evítalas si:

• Necesitas cambiar tamaño o color dinámicamente
• La flecha es parte de un diseño visual
• Va integrada en botones o contenedores

Ahí es donde CSS empieza a brillar.

Construir flechas con CSS usando bordes

Aquí entramos en el terreno más interesante. Cuando empecé a experimentar con flechas en CSS, entendí que no estaba dibujando flechas, sino jugando con bordes invisibles hasta que uno toma protagonismo.

El truco del border-width y los colores transparentes

La base es siempre la misma:

.flecha {
 width: 0;
 height: 0;
 border-style: solid;
}

Luego decides:

• Qué borde es visible
• Cuáles son transparentes
• Hacia dónde apunta la flecha

Ejemplo: flecha hacia la derecha

.flecha-derecha {
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-left: 15px solid black;
}

<div class="flecha-derecha"></div>

Flechas CSS en las cuatro direcciones

Cambiando el borde visible puedes crear cualquier dirección:

• Derecha → border-left
• Izquierda → border-right
• Arriba → border-bottom
• Abajo → border-top

Este patrón es la base de la mayoría de flechas CSS que ves en producción.

Errores comunes al crear flechas con CSS

Por experiencia, estos son los fallos más habituales:

• Olvidar width: 0 y height: 0
• No hacer transparentes los otros bordes
• Usar posiciones relativas incorrectas
• No calcular bien los tamaños del borde

Flechas CSS en contenedores y globos de texto

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;
}

El patrón siempre es el mismo:

• ::before o ::after
• Posición absoluta
• Bordes para crear la forma

Ajuste de posición con top, left y bottom

Si analizas varios ejemplos, verás que lo único que cambia realmente es la posición y el borde activo. En la práctica, mover una flecha suele ser cuestión de ajustar unos pocos píxeles hasta que encaje visualmente.

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; 

Crear flechas más realistas: de triángulos a flechas

Un triángulo funciona, pero muchas veces se ve demasiado plano. Cuando probé a combinar dos triángulos, el resultado fue mucho más cercano a una flecha real.

Flechas CSS con doble contenedor

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

CSS (resumen):

.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;
}

Cómo simular el “pico” de una flecha

El segundo triángulo, más pequeño y desplazado, crea ese recorte central que transforma un triángulo simple en una flecha visualmente más atractiva. Este enfoque es ideal cuando quieres iconos CSS sin depender de librerías externas.

Flechas con SVG: cuándo merece la pena usarlas

SVG tiene sentido cuando:

• Necesitas animaciones complejas
• Requieres precisión vectorial
• Vas a reutilizar la flecha muchas veces

Flechas HTML para navegación e interacción

Las flechas suelen usarse como botones de avanzar y retroceder.

Flechas como botones:

Usar <button> es una buena práctica por accesibilidad:

<button aria-label="Anterior" class="btn-flecha"></button>

Uso básico con JavaScript:

document.getElementById("btn-siguiente").addEventListener("click", () => {
 console.log("Siguiente");
});

Aquí, la flecha es solo la parte visual; la lógica la aporta JavaScript.

Qué método elegir para construir flechas HTML

En resumen:

• Texto simple → entidades HTML
• Diseño ligero → CSS con bordes
• Tooltips y globos → pseudo-elementos
• Animaciones → SVG
• Navegación → HTML + CSS + JS

No existe una única solución correcta, sino la más adecuada para cada caso.

Preguntas frecuentes sobre flechas en HTML

• ¿Se pueden crear flechas sin imágenes?
  • Sí, y de hecho es lo más recomendable usando CSS o entidades HTML.
• ¿Qué es mejor, CSS o SVG?
  • CSS para flechas simples y UI. SVG para gráficos complejos o animados.
• ¿Las flechas CSS afectan al rendimiento?
  • No, son extremadamente ligeras comparadas con imágenes o iconos externos.

Conclusión

Construir flechas HTML es un excelente ejemplo de cómo HTML y CSS bien usados pueden reemplazar imágenes e iconos. Con unos pocos bordes, pseudo-elementos y algo de práctica, puedes crear flechas flexibles, escalables y perfectamente integradas en cualquier diseño web.

El siguiente paso, aprende a una caja de luz difuminada con CSS