Generador de triángulos CSS
Genera triángulos CSS con el clásico truco de bordes. Establezca la dirección, el tamaño y el color, luego copie el fragmento.
CSS Triangle Generator
LiveCSS output
width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 60px solid #e11d48;
Key capabilities
- Genere triángulos CSS con trucos de bordes: dirección, tamaño y color.
- Se ejecuta en tu navegador
- Gratis para usar
Cómo usar
- Elija la dirección del triángulo.
- Establece el tamaño y el color de relleno.
- Copia el CSS.
How this tool works
- Elija la dirección del triángulo.
- Establece el tamaño y el color de relleno.
- Copia el CSS.
Recommended settings
- Utilice primero las opciones predeterminadas y luego ajústelas si es necesario
Supported formats
Text / on-page input
File size and limits
- Las vistas previas multicapa muy complejas pueden parecer más lentas en teléfonos más antiguos.
Privacy
Los generadores de color y CSS se ejecutan completamente en su navegador. Las vistas previas y las conversiones nunca cargan tus estilos.
Common use cases
- Utilice CSS Triangle Generator siempre que lo necesite: genere triángulos CSS con trucos de bordes: dirección, tamaño y color.
Troubleshooting
La vista previa se ve diferente después de pegar
Verifique si hay CSS competitivo en su página (restablecimientos, colores heredados). Primero copie la regla generada en una hoja de estilo aislada.
Preguntas frecuentes
¿Esto carga mi CSS?
No. Los generadores y convertidores se ejecutan en su navegador con vista previa en vivo.
¿Necesito una cuenta?
No. Abra la herramienta, modifique los controles y copie el CSS.
Herramientas relacionadas
CSS Clip Path Generator
Build polygon and shape clip-paths with an interactive preview.
Open toolBorder Radius Generator
Control each corner independently and preview rounded shapes with copy-ready CSS.
Open toolBox Shadow Generator
Design layered box-shadows with offset, blur, spread, and color — live preview included.
Open tool