Cómo crear flechas en HTML y CSS: guía completa con ejemplos

Construir flechas en 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 gran mayoría de las flechas que vemos en la web no son imágenes: son 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 HTML y código ASCII, hasta flechas avanzadas con CSS puro y SVG, explicando cuándo conviene usar cada una.

Antes vimos cómo crear formas geométricas con CSS, que es la base perfecta para entender la técnica que aplicaremos aquí.

Qué significa construir flechas en HTML

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

Indicar direcciones de navegación
Guiar al usuario dentro de la interfaz
Complementar contenedores como tooltips o globos de texto
Crear botones de avanzar/retroceder en carruseles o galerías
Reforzar la jerarquía visual en menús y listas

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 exactamente cuando hablamos de flechas en los contenedores? Bueno, una imagen vale más que mil palabras:

Flechas en contenedores HTML y CSS

Es una bifurcación que se añade a un contenedor; perfecta para menús emergentes o para construir globos —recuadros— de texto. En pocas palabras: colocar flechas en un contenedor con CSS, apuntando hacia la derecha, izquierda, abajo o arriba, sin necesidad de imágenes.

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

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

Entidades HTML / Unicode → simples y rápidas para insertar una flecha directamente en el texto
CSS puro → flechas sin imágenes usando la propiedad border
Flechas CSS en contenedores → tooltips y globos de texto con ::before / ::after
SVG → flechas complejas o animadas con control vectorial total
HTML + CSS + JavaScript → navegación interactiva y dinámica

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 y código ASCII (la opción más simple)

Las entidades HTML son la forma más rápida de añadir una flecha directamente en el texto. Funcionan igual que otras entidades conocidas como © o π: el navegador las interpreta y renderiza el carácter correspondiente sin necesidad de ninguna imagen ni hoja de estilos adicional.

Estas son las flechas básicas —izquierda, derecha, arriba y abajo— más utilizadas:

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

También puedes usar su equivalente en código Unicode decimal o hexadecimal. Por ejemplo, → es idéntico a → y produce exactamente el mismo resultado: →. Ambas formas son válidas y tienen soporte universal en todos los navegadores modernos.

Si lo que necesitas es el código ASCII de la flecha a la derecha para copiar y pegar, aquí tienes la referencia rápida:

Flecha derecha →: → / → / Unicode U+2192
Flecha izquierda ←: ← / ← / Unicode U+2190
Flecha arriba ↑: ↑ / ↑ / Unicode U+2191
Flecha abajo ↓: ↓ / ↓ / Unicode U+2193

Ejemplo de uso en HTML:

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

Mover a la derecha → siguiente paso

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

¿Cuándo usar entidades HTML y cuándo no?

Úsalas si:

La flecha forma parte del flujo de texto
No necesitas estilos personalizados ni animaciones
Buscas máxima compatibilidad con el mínimo código

Evítalas si:

Necesitas cambiar el tamaño o el color de forma dinámica
La flecha es parte de un diseño visual o un componente de UI
Va integrada dentro de botones, contenedores o tooltips

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 como tal, sino jugando con bordes invisibles hasta que uno toma protagonismo y forma el triángulo deseado.

El truco de border-width y los colores transparentes

La base es siempre la misma: un elemento con width: 0 y height: 0, sin contenido propio, cuya forma queda definida completamente por sus bordes. Al no tener dimensiones reales, los cuatro bordes se encuentran en el centro del elemento y, al darles distintos tamaños y colores, forman un triángulo:

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

A partir de ahí decides:

Qué borde es visible (el que define la dirección de la flecha)
Cuáles son transparent (los que desaparecen visualmente)
El tamaño de cada borde, que determina las proporciones de la flecha

Ejemplo: flecha CSS apuntando 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>

En este caso, border-top y border-bottom son transparentes, lo que forma los lados del triángulo, mientras que border-left con color es el que define la punta visible de la flecha. La razón por la que el borde izquierdo genera una flecha que apunta a la derecha es contraintuitiva al principio: el borde visible actúa como la base del triángulo, por lo que la punta apunta siempre en la dirección opuesta.

Flechas CSS en las cuatro direcciones

Cambiando el borde visible puedes crear una arrow css en cualquier dirección. La lógica es contraintuitiva al principio, pero tiene sentido: el borde que ves es el opuesto a donde apunta la flecha.

Flecha derecha → border-left con color
Flecha izquierda → border-right con color
Flecha arriba → border-bottom con color
Flecha abajo → border-top con color

Este patrón es la base de la mayoría de flechas CSS que encontrarás en proyectos reales de producción.

Errores comunes al crear flechas con CSS

Por experiencia, estos son los fallos más habituales al implementar esta técnica:

Olvidar establecer width: 0 y height: 0 en el elemento — sin esto, el triángulo no se forma correctamente
No declarar los otros bordes como transparent, lo que hace que aparezcan cuadrados en lugar de triángulos
Usar position: relative incorrectamente al combinar la flecha con un contenedor padre
No calcular bien los tamaños del border-width, lo que distorsiona las proporciones del triángulo

Flechas CSS en contenedores y globos de texto

Para este truco CSS usaremos una propiedad que ya vimos en la entrada anterior: Formas geométricas con CSS (parte 2). En aquella entrada repasamos, a través de tres ejemplos, la versatilidad de la propiedad border-width combinada con los pseudo-selectores ::before y ::after.

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

La clave está en que estos pseudo-elementos deben tener content: "" (cadena vacía) y position: absolute; el contenedor padre, a su vez, necesita position: relative para que el posicionamiento absoluto funcione correctamente. Sin esa relación padre-hijo en el flujo de posicionamiento, la flecha aparecerá desplazada o fuera de lugar.

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 para cada variante siempre sigue la misma estructura:

Pseudo-elemento ::before o ::after
position: absolute y el padre con position: relative
Bordes para crear la forma triangular

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 en top, left o bottom hasta que encaje visualmente con el contenedor.

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 derecho 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: lado izquierdo 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;
}

Ver ejemplo Descargar

Si revisas los CSS anteriores con calma, notarás que lo único que varía entre cada variante es la posición del pseudo-elemento —definida con top, bottom y left— y el lado al que se aplica el color en border-color. Ese color es el que "dibuja" la flecha; los otros tres lados permanecen transparent. Es así como border-width y border-color trabajan juntos para generar la forma deseada.

También podemos crear flechas independientes de los contenedores, algo más atractivas visualmente: más flechas y menos triángulos simples. Se pueden usar de forma aislada, como si fueran pequeños iconos CSS en forma de flecha, sin necesidad de ninguna librería externa:

El HTML consta de dos bloques anidados: un contenedor padre con la clase triangulo y la dirección, más un div interno vacío que actuará como el "pico" de la flecha:

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

El CSS completo 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: el contenedor padre (.triangulo) solo tiene borde —sin ancho ni alto—, definido únicamente con border-width. Esto lo convierte en un triángulo CSS básico.

Luego, el div interno —hijo directo de .triangulo— define otro border-width más pequeño y un border-color estratégico. Ese color puede tener hasta cuatro valores, uno por lado, que corresponden a cada dirección posible de la flecha (derecha, izquierda, arriba o abajo):

border-color: transparent black transparent transparent;

En el caso anterior solo definimos color en el segundo valor, que corresponde a border-right, creando la flecha que apunta a la izquierda. También es posible definir más de un color por lado para construir flechas más grandes o con proporciones distintas.

Finalmente, para crear ese pico característico en la cola de la flecha —y convertir así un triángulo simple en una flecha reconocible—, el contenedor interno se posiciona en el centro de la figura con:

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 superpuestos, el resultado fue mucho más cercano a una flecha real y visualmente más cuidada. La técnica del "doble triángulo" es especialmente útil cuando la flecha debe ser reconocible incluso en tamaños pequeños.

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 mediante top y left, crea ese recorte central que transforma un triángulo simple en una flecha visualmente atractiva. Este enfoque es ideal cuando necesitas iconos CSS sin depender de librerías externas como Font Awesome o similar.

Flechas con SVG: cuándo merece la pena usarlas

SVG tiene sentido cuando necesitas algo que CSS puro no puede ofrecerte fácilmente:

Animaciones complejas o trayectorias curvas
Precisión vectorial a cualquier escala sin pérdida de calidad
Reutilización como símbolo en un <defs> con <use>

Un ejemplo mínimo de flecha SVG apuntando a la derecha:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M5 12h14M13 6l6 6-6 6" stroke="black" stroke-width="2" fill="none"/>
</svg>

Para flechas estáticas o de interfaz, CSS suele ser suficiente y más eficiente. SVG cobra relevancia cuando la complejidad visual o la animación lo justifican.

Flechas HTML para navegación e interacción

Las flechas suelen usarse como botones de avanzar y retroceder en carruseles, sliders o paginaciones. Para estos casos, usar <button> en lugar de un <div> es una buena práctica de accesibilidad: permite la navegación por teclado y es reconocido correctamente por los lectores de pantalla.

Flecha como botón accesible:

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

Uso básico con JavaScript para manejar la interacción:

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

Aquí, la flecha es únicamente la parte visual; la lógica y el comportamiento los aporta JavaScript. El atributo aria-label es fundamental para describir la acción del botón cuando no hay texto visible, garantizando la accesibilidad para usuarios con tecnologías de asistencia.

Qué método elegir para construir flechas HTML

En resumen, esta es la guía rápida para elegir el enfoque correcto según el caso de uso:

Texto simple → entidades HTML (→, ←…)
Diseño ligero sin imágenes → CSS con border
Tooltips, globos y contenedores → pseudo-elementos ::before / ::after
Animaciones o gráficos complejos → SVG
Navegación interactiva → HTML + CSS + JavaScript con <button>

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

Preguntas frecuentes sobre flechas en HTML y CSS

¿Se pueden crear flechas sin imágenes?
- Sí, y de hecho es lo más recomendable. Con CSS puro o entidades HTML obtienes flechas escalables, ligeras y fáciles de personalizar sin cargar ningún archivo externo.
¿Qué es mejor, CSS o SVG para flechas?
- CSS para flechas simples de interfaz: botones, tooltips, indicadores. SVG para gráficos complejos, flechas animadas o cuando necesitas precisión vectorial total.
¿Las flechas CSS afectan al rendimiento de la página?
- No de forma significativa. Son extremadamente ligeras comparadas con imágenes o iconos de librerías externas, ya que no generan ninguna petición HTTP adicional.
¿Puedo añadir una css arrow with border (flecha con borde exterior)?
- Sí. La técnica consiste en superponer dos pseudo-elementos (::before y ::after) ligeramente desplazados y con colores diferentes: el primero crea el borde y el segundo, más pequeño, simula el relleno interior de la flecha.
¿Cuál es el código ASCII de la flecha a la derecha?
- El carácter Unicode de la flecha a la derecha es U+2192 (→). En HTML puedes escribirla como → o su equivalente decimal →. Si buscas el símbolo para copiar y pegar directamente, aquí lo tienes: →
¿Qué diferencia hay entre → y →?
- Ninguna en el resultado visual: ambas producen el mismo símbolo →. La entidad nombrada (→) es más legible en el código fuente; la referencia numérica decimal (→) es más portable en contextos donde las entidades nombradas no están soportadas, como algunos parsers XML estrictos.

Conclusión

Construir flechas en HTML es un excelente ejemplo de cómo HTML y CSS bien aplicados pueden reemplazar imágenes e iconos externos. Con unos pocos bordes, pseudo-elementos y algo de práctica, puedes crear flechas CSS flexibles, escalables y perfectamente integradas en cualquier diseño web, sin depender de librerías externas ni añadir peso innecesario a la página.

La técnica del triángulo CSS con border, combinada con ::before y ::after, es una de esas herramientas que, una vez que la dominas, aparece en decenas de situaciones diferentes: tooltips, menús desplegables, indicadores de posición, botones de navegación y mucho más.

El siguiente paso: aprende a crear una caja de luz difuminada con CSS.