Generador de Triángulos CSS
El truco clásico de triángulo CSS: un elemento de tamaño cero con bordes coloreados gruesos se convierte en un triángulo apuntando al lado opuesto al coloreado. La herramienta te da 8 direcciones (arriba/abajo/izq/der + 4 triángulos de esquina), slider de tamaño y selector de color. Activa 'clip-path' para la alternativa moderna — misma forma, sin bordes, más fácil de dimensionar con width/height.
Vista previa
.triangle {
width: 0;
height: 0;
border-bottom: 80px solid #5b8def;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}Los triángulos por border usan un elemento de tamaño cero con bordes coloreados gruesos — los lados transparentes se cancelan, dejando visible solo el triángulo coloreado.
Cómo usar
- Elige dirección (▲▼◀▶ o las 4 esquinas).
- Define tamaño y color.
- Opcionalmente activa clip-path para algo más limpio.
- Copia el CSS a tu proyecto.
Preguntas frecuentes
- ¿Por qué funciona el truco de border?
- Un elemento de ancho 0 con bordes gruesos se dibuja como 4 triángulos que se tocan en un punto. Haz 3 transparentes y 1 con color — solo se ve ese.
- ¿Border vs clip-path?
- Border es más viejo (funciona en IE6) y tiene mini diferencias de antialiasing. clip-path es más limpio y combina mejor con fondos/imágenes — preferible para código nuevo.
- ¿Puedo rotar?
- Para ángulos no estándar, usa clip-path y ajusta los puntos del polygon. Las 8 direcciones cubren flechas, tooltips, breadcrumbs.
- ¿Soporte?
- Border-triangle es universal. clip-path funciona en todos los navegadores desde 2016 — seguro en 2026.
Herramientas relacionadas
Generador de Border Radius
Arrastra esquinas por separado, prueba radios elípticos, copia el CSS — con presets chat-bubble, pill, blob y tab.
Generador de CSS clip-path (polígono, círculo)
Generador visual de la propiedad CSS `clip-path` — elige una forma (círculo, elipse, inset o polígono), ajusta números con sliders o haz clic en la vista previa para añadir puntos del polígono, y copia una declaración CSS lista para pegar. Incluye 10 presets (triángulo, hexágono, estrella, flecha, bocadillo, plus, …).
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de CSS Box Shadow
Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.
Playground de Filtros CSS
Compón visualmente blur, brightness, contrast, hue, sepia, invert y más — copia el filtro CSS o el valor arbitrario de Tailwind.
Generador de Curva Cubic-Bezier CSS
Arrastra los puntos de control para diseñar una curva de easing CSS — previsualiza el movimiento, copia cubic-bezier().