Generador de triángulos CSS: código con border y clip-path | We.Inc
Elige una de ocho direcciones, ajusta el ancho, el alto y el color, y copia un triángulo CSS hecho con bordes o con clip-path, además de la versión Tailwind y un ejemplo de flecha de tooltip.
Generador de triángulos CSS
Hay dos formas limpias de dibujar un triángulo en CSS. El truco clásico da bordes gruesos a una caja de tamaño cero y hace transparentes todos menos uno. La forma moderna da a una caja normal un tamaño y un fondo, y luego la recorta con clip-path: polygon() usando tres puntos. Este generador escribe ambas para ocho direcciones.
¿Método de bordes o clip-path?
Necesidad
Método de bordes
Flecha sólida de un color
Funciona en todas partes
Funciona en todos los navegadores actuales
Relleno con degradado o imagen
No, cada borde admite un solo color
Sí, recorta cualquier fondo
Solo contorno
Apila dos triángulos
No directamente; clip-path también recorta bordes y sombras
Tamaño definido por width y height
No, el tamaño sale del grosor de los bordes
Sí
Flecha de tooltip en ::before o ::after
La opción habitual
También sirve
Las flechas de los tooltips, los bocadillos, los indicadores de los desplegables y las esquinas de las cintas son casi siempre pequeños triángulos CSS. Elige una dirección, arrastra el tamaño y la vista previa muestra las dos técnicas lado a lado para que veas que coinciden antes de copiar la que encaje con tu componente.
Elige una dirección: arriba, abajo, izquierda, derecha o uno de los cuatro triángulos de esquina.
Ajusta el ancho, el alto y el color. El botón equilátero pone la altura en el ancho por 0.866.
Compara las dos vistas previas y copia la versión con bordes, la versión con clip-path o las clases de Tailwind.
En el método de bordes, el grosor del borde del lado coloreado pasa a ser la altura del triángulo y los dos lados transparentes ocupan cada uno la mitad de la base.
Usa clip-path cuando el triángulo necesite un degradado, una imagen o un cambio de color al pasar el ratón sobre una caja con tamaño.
Para flechas de tooltip, coloca el triángulo con position: absolute en un pseudoelemento para no añadir marcado extra.
¿Necesitas más de tres puntos? El generador de clip-path te permite arrastrar cada esquina de un polígono.
Preguntas frecuentes
¿Cómo funciona el truco del triángulo con bordes?
Donde se juntan dos bordes, el navegador dibuja la esquina en diagonal. Con width y height a 0, la caja no es más que cuatro cuñas de borde que se encuentran en el centro. Colorea una cuña, haz transparentes las vecinas y verás un único triángulo.
¿Cómo hago un triángulo equilátero?
La altura de un triángulo equilátero es su base por la raíz cuadrada de 3 dividida entre 2, unos 0.866. Para una base de 100 píxeles, usa una altura de unos 87 píxeles.
¿Puede un triángulo CSS tener borde o contorno?
No por sí solo. Una solución habitual es apilar dos triángulos: uno algo mayor detrás con el color del contorno y el del relleno encima, desplazado según el grosor del contorno. Un SVG en línea con stroke es más sencillo cuando necesitas un contorno nítido.
¿clip-path cambia la caja de maquetación del elemento?
No. El elemento conserva su tamaño rectangular completo en la maquetación; clip-path solo cambia lo que se pinta. El contenido fuera del polígono, incluidas las sombras y los bordes, se recorta.
¿Cómo escribo un triángulo con clip-path en Tailwind?
Usa una propiedad arbitraria con guiones bajos en lugar de espacios, como [clip-path:polygon(50%_0,100%_100%,0_100%)], junto con clases de tamaño y color como w-[40px] h-[30px] bg-[#4F98FB].
Elige el método según el uso del triángulo
Para una flecha diminuta que sobresale de un tooltip o un menú, el método de bordes sigue siendo el código más corto, y encaja bien en un pseudoelemento. Tiene un solo color y su tamaño sale del grosor de los bordes, que es todo lo que necesita una flecha.
Para una forma decorativa, una esquina de hero o cualquier cosa con degradado, clip-path es más fácil de entender: defines width y height como en cualquier caja y describes las tres esquinas en porcentajes.
Triángulos de esquina
Los triángulos de esquina tienen un ángulo recto y llenan la mitad de un rectángulo. Con bordes, coloreas un lado y haces transparente un lado contiguo, dejando los otros dos a cero. Vienen bien para esquinas de papel dobladas y colas de cinta.
Flecha de tooltip con un pseudoelemento
Bocadillo con flecha hacia abajo
El elemento ::after no tiene tamaño. Su borde superior es la flecha y los bordes laterales son transparentes.
Triángulo con degradado usando clip-path
Un triángulo de bordes no admite degradado. Una caja recortada sí, porque clip-path recorta cualquier fondo que pinte la caja.
Constructor de triángulos
Elige una dirección, ajusta el tamaño y el color, y compara el triángulo con bordes con el triángulo con clip-path antes de copiar.