Generador de Triángulos CSS
El generador de triángulos CSS construye triángulos de puro CSS de forma visual, para que nunca más tengas que calcular a mano los anchos de border ni las coordenadas de clip-path. Elige una dirección, define el tamaño y el color, y copia el CSS listo para pegar en la flecha de un tooltip, el cursor de un menú desplegable, un chevron de migas de pan o una cinta de esquina.
Admite ambas técnicas clásicas. El truco del border pone el ancho y el alto del elemento en cero y forma un triángulo de color a partir de bordes transparentes, lo que funciona en todos los navegadores. Clip-path usa clip-path: polygon() sobre una caja de color para lograr un código más limpio y legible en los navegadores modernos. Ambos producen la misma figura, y puedes compararlos lado a lado antes de copiar.
Cómo usarlo
Elige una dirección
Haz clic en uno de los 8 botones de la cuadrícula de direcciones. Las cuatro direcciones cardinales (Arriba, Derecha, Abajo, Izquierda) crean triángulos estándar, mientras que las cuatro diagonales (Arriba izquierda, Arriba derecha, Abajo izquierda, Abajo derecha) crean triángulos rectángulos de esquina.
Define el tamaño
Arrastra los deslizadores de Ancho y Alto o escribe valores exactos de 1 a 500 píxeles. Activa Bloquear proporción para mantener ambas dimensiones iguales: al cambiar una, la otra se actualiza.
Elige un color
Usa el selector de color para cualquier color personalizado, o haz clic en una de las muestras predefinidas para elegir rápido. La vista previa y el código generado se actualizan al instante.
Selecciona un método y copia
Cambia el Método entre Border y Clip-path, usa las pestañas de código para comparar ambos, y luego haz clic en Copiar CSS para enviar el código directo a tu portapapeles. Pulsa Restablecer cuando quieras para volver a los valores predeterminados.
Funciones
8 direcciones
Apunta el triángulo hacia Arriba, Derecha, Abajo o Izquierda para figuras estándar, o usa las cuatro diagonales para triángulos rectángulos de esquina.
Controles precisos de tamaño
Define el ancho y el alto de forma independiente, de 1 a 500px, con deslizadores o campos numéricos, y bloquea la proporción para escalar proporcionalmente.
Personalización de color
Elige cualquier color con el selector nativo o entre 8 muestras predefinidas: índigo, oscuro, blanco, rojo, verde, azul, ámbar y violeta.
Métodos Border y Clip-path
Genera código con el clásico truco del border transparente para la máxima compatibilidad, o con un polígono clip-path para un CSS moderno y más limpio.
Vista previa en vivo
Mira tu triángulo renderizado en tiempo real sobre un fondo de tablero de ajedrez, con una barra de info que muestra las dimensiones y la dirección actuales.
Vista previa con escalado automático
Los triángulos grandes se reducen automáticamente para caber en el área de vista previa manteniendo proporciones precisas.
12 plantillas integradas
Parte de figuras habituales: flechas en las cuatro direcciones, flechas finas y anchas, flechas de tooltip, un cursor, triángulos de esquina y una bandera.
Doble pestaña de código
Visualiza y compara el CSS generado para ambos métodos con el selector de pestañas; el código se actualiza al instante al cambiar cualquier ajuste.
Copia con un clic
Copia el CSS del método activo a tu portapapeles con un solo clic, listo para pegar en tu hoja de estilos.
Restablecer a valores predeterminados
Devuelve la dirección, el tamaño, el color y el método a sus valores iniciales en cualquier momento con el botón Restablecer.
Preguntas frecuentes
¿Cómo se hace un triángulo en CSS?
Las dos formas habituales son el truco del border y clip-path. Con este generador solo eliges una dirección, un tamaño y un color, y luego copias el CSS: no hay que hacer cálculos a mano. Elige el método Border para la mayor compatibilidad con navegadores, o Clip-path para un código moderno y más limpio.
¿Cómo crea el truco del border un triángulo?
Cuando un elemento tiene ancho y alto en cero, sus cuatro bordes se encuentran a lo largo de líneas diagonales. Al hacer transparentes algunos bordes y dejar uno con color, solo permanece visible el área triangular de ese borde con color, lo que forma la figura del triángulo.
¿Debo usar el truco del border o clip-path?
Usa el truco del border cuando necesites compatibilidad con navegadores muy antiguos, ya que funciona en todas partes. Usa clip-path en proyectos modernos donde quieras un CSS más corto y legible, con ancho y alto explícitos. Ambos producen un triángulo visualmente idéntico, así que puedes cambiar el Método y comparar.
¿Cómo cambio la dirección del triángulo?
Haz clic en cualquiera de los 8 botones de dirección. Las direcciones cardinales (Arriba, Derecha, Abajo, Izquierda) crean un triángulo estándar apuntando hacia ese lado, mientras que las diagonales (Arriba izquierda, Arriba derecha, Abajo izquierda, Abajo derecha) crean triángulos rectángulos de esquina para cintas y efectos de esquina doblada.
¿Puedo crear triángulos equiláteros?
Sí. Para un triángulo que parezca equilátero apuntando hacia arriba o abajo, define el ancho en aproximadamente 1,15× el alto (por ejemplo 115×100). Para un triángulo equilátero matemáticamente exacto, el ancho debe ser igual al alto × 2 / √3.
¿Por qué mi triángulo se ve borroso en tamaños pequeños?
Los triángulos muy pequeños (por debajo de unos 10px) pueden verse borrosos por el renderizado de subpíxeles, que es una limitación del navegador y no un problema del código. Usa un tamaño un poco mayor, o elige dimensiones que den valores de border en píxeles enteros, para mantener los bordes nítidos.
¿Puedo animar un triángulo CSS?
Sí. Los triángulos con el truco del border pueden animar su border-width y su border-color. Los triángulos con clip-path son más flexibles: puedes animar los puntos del polígono, el color de fondo, el ancho y el alto para lograr transiciones de forma suaves.
Aún no hay comentarios. ¡Sé el primero en comentar!