Generador de triángulos CSS
Genera código CSS para crear triángulos mediante bordes configurando la orientación y el tamaño en píxeles.
Ejecutar herramienta
Esta herramienta genera fragmentos de código CSS para construir triángulos geométricos mediante la técnica tradicional de bordes transparentes. Al definir la orientación y la dimensión deseada en píxeles, la utilidad calcula las dimensiones exactas de cada lado (`border-width`), fija el ancho y el alto del elemento en cero y establece un estilo de borde continuo (`solid`). Entre las orientaciones admitidas figuran las cuatro direcciones cardinales (arriba, abajo, izquierda y derecha) y las cuatro diagonales (arriba a la izquierda, arriba a la derecha, abajo a la izquierda y abajo a la derecha). El valor numérico de tamaño se divide y distribuye proporcionalmente entre los bordes según la orientación elegida. Si no introduces valores, el generador toma de forma predeterminada una orientación hacia arriba y un tamaño de 20 píxeles. El bloque de código resultante queda listo para copiarse directamente en cualquier archivo de estilos o componente visual.
Instrucciones
- Indica la dirección hacia la que debe apuntar el triángulo (por ejemplo: up, down, left, right o diagonales).
- Introduce el valor numérico correspondiente al tamaño en píxeles.
- Opcionalmente, especifica un valor de color en formato de texto.
- Pulsa en el botón para generar las reglas CSS.
- Copia el bloque de declaraciones CSS generado para pegarlo en tu hoja de estilos.
Ejemplos
- Orientación: up, Tamaño: 20 -> genera reglas CSS con width: 0, height: 0, border-style: solid y anchos de borde calculados en píxeles para apuntar hacia arriba.
- Orientación: right, Tamaño: 40 -> genera el código CSS con grosores de borde ajustados para formar un triángulo horizontal apuntando a la derecha.
Preguntas frecuentes
¿Qué orientaciones reconoce el generador?
Admite patrones específicos para up, down, left, right, top-left, top-right, bottom-left y bottom-right.
¿Qué sucede si se escribe una orientación no reconocida?
El generador aplica el esquema de bordes hacia arriba por defecto, manteniendo el texto introducido en el selector CSS resultante.
¿Afecta el campo de color al código CSS generado?
En la salida actual, las declaraciones generadas establecen bordes transparentes y no incorporan el valor del campo de color al resultado final.