Generated CSS
Los triángulos CSS aparecen en tooltips, flechas desplegables, burbujas de diálogo, divisores y formas decorativas. Pueden crearse mediante tres técnicas distintas, cada una con diferentes compensaciones en cuanto a soporte de navegadores, compatibilidad con background-image, comportamiento de box-shadow y capacidades de animación.
El truco de bordes es la técnica más antigua y compatible. Explota una propiedad geométrica raramente notada de los bordes CSS: cuando un elemento tiene cero de ancho y cero de alto, sus cuatro bordes todavía ocupan espacio y se encuentran en el centro del elemento. Establecer un elemento a cero ancho y cero alto colapsa esos cuatro trapecios para que todos se encuentren en un único punto central, haciendo que cada uno sea un triángulo. Hacer tres de los cuatro bordes transparentes deja un único triángulo visible apuntando lejos del borde coloreado.
El truco de bordes tiene una limitación significativa: box-shadow proyecta sombras sobre el rectángulo invisible en lugar de la forma del triángulo. Para formas triangulares que necesitan sombras, usa filter: drop-shadow() aplicado a un elemento envolvente.
El enfoque clip-path: polygon() toma un elemento rectangular normal y lo recorta en forma de triángulo. A diferencia del truco de bordes, el elemento conserva su estructura rectangular normal debajo — todavía tiene un fondo, puede recibir box-shadow y puede contener contenido. La ventaja clave es que filter: drop-shadow() aplicado al elemento o a un envolvente sigue la forma recortada.
Las flechas de tooltip son la aplicación más común de los triángulos CSS. El enfoque estándar usa un pseudo-elemento ::before o ::after en el contenedor del tooltip, posicionado absolutamente para extenderse justo más allá del borde del tooltip. El pseudo-elemento recibe cero dimensiones y bordes coloreados para producir un triángulo apuntando hacia el elemento disparador.
Los triángulos de esquina — triángulos que se sientan en una esquina en lugar de apuntar en una dirección cardinal — se producen con el truco de bordes usando solo dos bordes en lugar de tres. Se usan comúnmente como decoraciones "ribbon" en tarjetas y como insignias "sale" o "new".
El enfoque clip-path: polygon() permite animaciones de morfología de forma que el truco de bordes no puede hacer. Debido a que los valores de clip-path pueden transicionarse cuando tanto el inicio como el fin tienen el mismo número de puntos de polígono, puedes animar un triángulo cambiando de dirección, colapsando a un punto, o transformándose en un rectángulo.
Un triángulo equilátero tiene tres lados iguales y tres ángulos de 60 grados. Para el truco de bordes, la altura de un triángulo equilátero es su ancho multiplicado por √3/2 ≈ 0.866. Con clip-path, puedes usar aspect-ratio: 1 / 0.866 en un elemento responsivo.
El ícono de chevron clásico — un triángulo abierto en lugar de sólido — se hace con un elemento cuadrado con dos bordes rotado 45 grados. Esto produce la forma clásica de chevron de flecha desplegable. Rotar por -45 grados da un chevron hacia arriba, 135 grados da uno hacia la izquierda, y -135 grados da uno hacia la derecha.
El truco de bordes produce un triángulo visualmente, pero el cuadro delimitador del elemento sigue siendo un rectángulo de cero dimensiones. Box-shadow proyecta sombra sobre el cuadro delimitador, que es invisible. Usa filter: drop-shadow() en un elemento envolvente — analiza los píxeles renderizados reales del elemento y proyecta sombra solo sobre las partes visibles.
El truco de bordes no puede acomodar rellenos de degradado. Para un triángulo de degradado, usa clip-path: polygon() con cualquier degradado como fondo del elemento.
Con clip-path, sí. Define ambas orientaciones como valores polygon() con el mismo número de puntos, y transiciona entre ellas.
Usa el truco de bordes mediante un pseudo-elemento (::before o ::after) para flechas de tooltip. Produce la menor cantidad de código, funciona en todos los navegadores y te da control preciso sobre el tamaño y posición de la flecha.
Apila dos triángulos de truco de bordes usando un pseudo-elemento: el elemento base produce el triángulo exterior más grande en el color del borde, y su pseudo-elemento ::after produce un triángulo ligeramente más pequeño en el color de fondo, posicionado para superponerse.