Generador de triángulo y flecha CSS

Cómo funciona

Escriba el color del triángulo en el panel izquierdo — HEX, RGB y HSL funcionan, y el código se regenera con cada cambio. Elija una dirección y ajuste el ancho y el alto: 24 píxeles de ancho por 16 de alto es un punto de partida habitual para flechas de menú desplegable y de tooltip. La herramienta escribe width: 0 y height: 0 y construye el triángulo con los grosores de borde; en la dirección hacia arriba, la base de 24 píxeles se reparte en 12 píxeles para los valores izquierdo y derecho de border-width — con un ancho impar verá medios valores como 12.5px, que el navegador dibuja sin problema. Las direcciones de esquina usan solo dos bordes y rellenan esa esquina de la caja con un triángulo rectángulo; así se hacen los cortes de cinta y de insignia. Copie el código en su propio selector o descargue la vista previa como PNG de 1200×800 píxeles.

Esta herramienta también se busca como flecha css, flecha tooltip css.

¿Qué es Truco de bordes?

El truco de bordes es la manera clásica de dibujar un triángulo en CSS sin archivo de imagen. Una caja con ancho y alto cero recibe bordes gruesos; como los bordes se encuentran en las esquinas siguiendo diagonales de 45 grados, cada borde toma forma de triángulo. Se colorea el lado deseado, se ponen los vecinos en transparent y solo ese triángulo queda visible. La técnica es muy antigua y funciona igual en prácticamente todos los navegadores publicados; las flechas de menús desplegables, las puntas de tooltip y las cintas de esquina son sus usos más comunes.

¿Qué es clip-path?

clip-path es la propiedad de CSS que recorta el área visible de un elemento según un trazado geométrico; escribir polygon(50% 0, 100% 100%, 0 100%) recorta el elemento en triángulo. La diferencia con el truco de bordes es que el elemento recortado es una caja real: puede contener un degradado, una imagen o texto, y la mayoría de los navegadores pinta sus bordes con más suavidad. A cambio, el trazado se escribe a mano y los navegadores muy antiguos ignoran la propiedad. En la práctica: truco de bordes para flechas pequeñas, clip-path para formas grandes que llevan contenido.

¿En qué se diferencian el triángulo de bordes y el de clip-path?

El triángulo de bordes es un truco de dibujo: en el centro no hay área real para contenido, el triángulo es solo pintura de borde de un color. Eso lo limita a colores planos, pero funciona en todos los navegadores y dos líneas de código resuelven el trabajo — ideal para flechas pequeñas, indicadores y cortes de esquina. clip-path, en cambio, recorta una caja real en triángulo: caben un degradado, una foto o incluso texto, y el borde diagonal se ve más liso en la mayoría de las pantallas; a cambio usted escribe las coordenadas y, en navegadores muy antiguos, la forma vuelve a ser un rectángulo. Regla práctica: bordes para flechas y marcas de esquina, clip-path para formas con contenido o de más de 100 píxeles.

La caja de tamaño cero: el triángulo es en realidad un borde

Todo el truco nace de una observación: en una caja con bordes gruesos, dos bordes vecinos se encuentran en la esquina siguiendo una diagonal de 45 grados. Reduzca el ancho y el alto de la caja a cero y solo quedan los bordes — cada uno con forma de triángulo. Pinte un borde, ponga sus vecinos en transparent y en pantalla queda un único triángulo. No borre las líneas width: 0 y height: 0 del código; si la caja recupera tamaño, el triángulo se deforma en trapecio.

Conviene decir su límite conocido: la diagonal sale del pintado de bordes del navegador y en algunas pantallas puede verse ligeramente dentada — cuanto más grande el triángulo, más se nota. En flechas pequeñas y cortes de esquina es imperceptible; para triángulos decorativos de más de 100 píxeles, considere clip-path, que dibuja un borde más liso.

¿Qué dirección para qué tarea?

El sentido de un triángulo se lee en su dirección; estas son las parejas habituales.

• Flecha bajo un globo de tooltip → hacia arriba o abajo, base de 12-16 píxeles
• Indicador de menú desplegable → hacia abajo, 8-10 píxeles: pequeño junto al texto
• Siguiente / atrás, reproducir → a la derecha o a la izquierda, ancho y alto parecidos
• Cinta, insignia, etiqueta de esquina → direcciones de esquina: el triángulo rellena la esquina
• Punta de globo de diálogo → una de las esquinas inferiores, del color del fondo del globo

Preguntas frecuentes

¿Este triángulo es una imagen? ¿La página carga un archivo?

No hay archivo alguno; el triángulo es CSS puro. Los bordes gruesos de una caja sin tamaño se encuentran en diagonal en las esquinas; al pintar un lado y volver transparentes sus vecinos, queda un triángulo. Como es código, se ve nítido en cualquier densidad de pantalla y el color se cambia en una línea.

¿Cómo sujeto el triángulo a un globo de diálogo o a un tooltip?

El camino habitual es el pseudoelemento ::after del globo: dele al globo position: relative, al pseudoelemento position: absolute y content: '', y añada las líneas de borde que produce esta herramienta. Coloque la flecha en el borde del globo con propiedades como left y bottom — no entra ningún elemento extra en el HTML.

¿Por qué el borde diagonal se ve dentado?

La diagonal sale de cómo el navegador pinta la unión de bordes, y el suavizado varía entre navegadores; en triángulos grandes el escalonado puede hacerse visible. Las flechas pequeñas no dan problema. Si necesita un triángulo decorativo grande, clip-path: polygon(...) da un borde más liso.

¿A qué parte del código va mi color?

A la línea border-color: el lado pintado lleva su valor y los otros tres lados dicen transparent. A diferencia de un generador de border-radius, aquí el color es parte del código, porque el borde mismo es el triángulo; para cambiarlo después, edite ese único valor.