Generador de flechas CSS

Siguiente

Crea una flecha CSS sencilla. Elige derecha, izquierda, arriba o abajo, además del color, tamaño cuadrado y grosor del borde. Después copia la regla .arrow generada.

Crea una flecha CSS

  1. 1

    Elige la dirección

    Selecciona derecha, izquierda, arriba o abajo.

  2. 2

    Define el aspecto

    Indica color, tamaño y grosor en píxeles.

  3. 3

    Copia el CSS

    Revisa la vista previa y copia la regla.

El generador crea un elemento .arrow cuadrado con display: inline-block, el mismo ancho y alto, borde derecho e inferior y una rotación para las cuatro direcciones.

No genera triángulos de borde, clip-path, SVG, degradados, flechas diagonales o colas de tooltip. Tampoco entrega HTML, validación de diseño ni consejos de compatibilidad. Prueba el CSS copiado en tu propia página.

Herramientas relacionadas