Generador de triángulos CSS
Elige una dirección, un tamaño y un color para obtener un triángulo CSS perfecto al píxel. Obtienes tanto el clásico truco del borde de tamaño cero como una versión moderna con clip-path, listas para copiar.
Última actualización:
Cómo usar Generador de triángulos CSS
- Elige una dirección en el panel de flechas, por ejemplo Arriba para un caret o Abajo a la izquierda para una cinta de esquina.
- Ajusta el ancho y el alto en píxeles, o marca Equilátero para lados iguales.
- Elige un color con el selector de color o escribe un código hex.
- Opcional: marca Pseudoelemento para obtener código ::after para una flecha de tooltip, y define tu propio selector.
- Copia el CSS del método del borde o del método clip-path y pégalo en tu hoja de estilos.
Valores de borde para cada dirección del triángulo
Para un triángulo de W píxeles de ancho y H píxeles de alto, define width: 0; height: 0; y estos bordes (el lado coloreado apunta en sentido contrario a la punta):
| Dirección | Borde coloreado | Bordes transparentes | Polígono clip-path |
|---|---|---|---|
| Arriba | bottom: H | left y right: W/2 | 50% 0, 100% 100%, 0 100% |
| Abajo | top: H | left y right: W/2 | 0 0, 100% 0, 50% 100% |
| Izquierda | right: W | top y bottom: H/2 | 0 50%, 100% 0, 100% 100% |
| Derecha | left: W | top y bottom: H/2 | 0 0, 100% 50%, 0 100% |
| Arriba a la izquierda | top: H | right: W | 0 0, 100% 0, 0 100% |
| Arriba a la derecha | top: H | left: W | 0 0, 100% 0, 100% 100% |
| Abajo a la izquierda | bottom: H | right: W | 0 0, 100% 100%, 0 100% |
| Abajo a la derecha | bottom: H | left: W | 100% 0, 100% 100%, 0 100% |
Triángulo equilátero: H = W × √3 ÷ 2 ≈ W × 0.866. Por tanto, una flecha hacia arriba de 40px de ancho necesita border-bottom: 35px (34.64 redondeado) y bordes laterales de 20px.
Usos comunes
- Flechas de tooltips y popovers: un triángulo pequeño (de 8 a 12px) en
::after, colocado entop: 100%del tooltip. - Carets de menús desplegables: un triángulo hacia abajo de 10 × 6px junto a la etiqueta de un menú; gíralo 180° cuando el menú se abra.
- Bocadillos de diálogo: un triángulo de esquina (abajo a la izquierda o abajo a la derecha) del color del bocadillo.
- Cintas de esquina e insignias: un triángulo grande arriba a la derecha con una etiqueta girada 45°.
- ¿Formas más complejas? Dibuja cualquier polígono con el Generador de clip-path CSS.
Preguntas frecuentes
¿Cómo funciona el truco del triángulo con bordes en CSS?
Un elemento con width: 0 y height: 0 se dibuja por completo con sus bordes. Donde se juntan dos bordes, el navegador divide la esquina en diagonal. Si coloreas un borde y haces transparentes los bordes contiguos, solo queda visible un triángulo.
Truco del borde o clip-path: ¿cuál debo usar?
Ambos funcionan en todos los navegadores modernos. El truco del borde no necesita fondo y es ideal para flechas diminutas en tooltips y menús desplegables. clip-path es más fácil de leer, puede llevar un degradado o una imagen de fondo y se puede animar, pero el elemento necesita un ancho y un alto reales.
¿Cómo hago un triángulo equilátero en CSS?
La altura de un triángulo equilátero es la longitud del lado × √3 ÷ 2 (unos 0.866). Para un triángulo hacia arriba de 100px de ancho usa border-left y border-right de 50px y border-bottom de 86.6px (redondeado a 87px). La opción Equilátero hace este cálculo.
¿Cómo añado una flecha triangular a un tooltip?
Dale al tooltip position: relative y añade un pseudoelemento ::after con content: "", position: absolute y los bordes del triángulo. Colócalo con top: 100% y left: 50% más un margen negativo de la mitad del ancho de la flecha para que quede centrado bajo la caja. Marca Pseudoelemento para generarlo.
¿Por qué mi triángulo con bordes se ve dentado o tiene una línea?
Los anchos de borde muy finos o no enteros pueden suavizarse de forma desigual en algunas pantallas. Usa valores de píxeles enteros y, si aparece un borde tenue, usa transparent en lugar de un borde blanco o del color del fondo.
¿Puede un triángulo CSS tener borde o sombra?
No directamente con el truco del borde. Coloca detrás un triángulo algo más grande de un color más oscuro (por ejemplo ::before para el contorno y ::after para el relleno), o usa clip-path en un contenedor con filter: drop-shadow() para la sombra.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.