Generador de triángulo CSS con bordes
Genera un triángulo CSS (truco de bordes) con dirección, tamaño y color.
🔒 100 % en el cliente — no se envía ningún dato
Crea un triángulo CSS usando la técnica de los bordes y copia código listo para pegar. Elige la dirección, el tamaño y el color con una vista previa instantánea. Perfecto para flechas, tooltips y punteros, generado por completo en tu navegador.
What is it for?
- ▸ Crear flechas y punteros sin imágenes
- ▸ Añadir una punta a un tooltip o a una burbuja de chat
- ▸ Elegir la dirección, el tamaño y el color del triángulo
- ▸ Copiar CSS puro ligero y muy compatible
FAQ
¿Cómo se crea un triángulo en CSS?
Dando a un elemento ancho y alto cero y coloreando un solo borde mientras los demás quedan transparentes.
¿Puedo cambiar la dirección del triángulo?
Sí, basta con elegir qué borde se colorea para que apunte arriba, abajo, izquierda o derecha.
¿Este triángulo es compatible con todos los navegadores?
Sí, la técnica de los bordes es antigua y está soportada por todos los navegadores, incluso los más antiguos.
Related tools
Relación de aspecto · calculadora Calcula una relación de aspecto (16:9…) y deriva una dimensión proporcional que falte. Generador de códigos de barras Genera un código de barras (EAN-13, Code128, UPC) a partir de un valor, descargable, en tu navegador. Base64 → imagen Decodifica un data URI o Base64 en una imagen visualizable y descargable, en tu navegador. CSS border-radius · generador Crea esquinas redondeadas en CSS (border-radius) con vista previa en vivo y código listo para copiar. CSS box-shadow · generador Genera una sombra CSS box-shadow con vista previa en vivo y código listo para copiar. Eliminar croma (pantalla verde) Haz transparente un color de fondo (pantalla verde/azul) y exporta un PNG, en tu navegador.