Categoría: Desarrollo
Generador de triángulos CSS
Crea un triángulo en CSS puro con el truco de los bordes
Elige una dirección, un tamaño y un color para crear una caja de tamaño cero con bordes coloreados que se renderiza como un triángulo, con vista previa en vivo y la declaración CSS lista para copiar. Todo se calcula en tu navegador.
width: 0; height: 0; border-right: 80px solid transparent; border-bottom: 80px solid #0f7b63; border-left: 80px solid transparent;
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
Un triángulo CSS es una caja con `width: 0; height: 0;` cuyos bordes reciben color en un lado y se hacen transparentes en los dos contiguos, de modo que solo se ve la cuña del borde coloreado. Es fácil equivocarse a mano —el par de lados incorrecto, o un borde que queda sólido en vez de transparente—, así que esta herramienta construye las cuatro declaraciones a partir de una dirección, un tamaño y un color, y muestra el resultado en una caja real mientras los cambias.
Cómo se usa
- Elige una dirección: arriba, abajo, izquierda o derecha.
- Define el tamaño y el color.
- Copia las declaraciones de borde en tu hoja de estilos.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Se envía algo a un servidor?
- No. La vista previa es un borde CSS real renderizado por tu navegador, y la declaración es texto generado en la página.
- ¿Por qué el triángulo necesita el ancho y el alto en 0?
- El truco de los bordes depende de que estos se encuentren en un punto en lugar de enmarcar una caja. Un ancho o alto distinto de cero aplanaría la cuña en un trapecio.
- ¿Puedo usarlo para una flecha en un tooltip o un globo de diálogo?
- Sí, ese es el uso más común. Posiciona el triángulo de forma absoluta contra el borde del tooltip y haz coincidir su color con el fondo del tooltip.