El truco del triángulo CSS
Es uno de los hacks más antiguos y elegantes de CSS. Aprovecha cómo el navegador renderiza los bordes de un elemento. Cuando tenés un div sin width ni height pero con bordes anchos, los bordes se cortan diagonalmente entre sí, formando triángulos. Si hacés tres de los bordes transparentes y dejás el cuarto visible, ves un solo triángulo apuntando en una dirección.
Sintaxis
.triangle-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid #000;
}Para apuntar arriba, hacés visible el border-bottom (porque la base del triángulo es abajo). Para apuntar abajo, hacés visible el border-top. Y así con izquierda y derecha.
Cuándo conviene
- Tooltips: el "rabito" del tooltip que apunta al elemento.
- Speech bubbles: bocadillos de texto.
- Arrows en cards: indicar selección o expansión.
- Decoraciones: ornamentos pequeños sin necesitar SVG.
Triángulo con clip-path
La alternativa moderna, más legible, es clip-path:
.triangle {
width: 40px;
height: 30px;
background: #000;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}clip-path con polygon() recibe coordenadas en porcentaje y forma cualquier polígono. Es más legible y soporta más formas. La desventaja: ligeramente más caro de renderizar para muchos elementos.
Triángulos asimétricos
Si querés un triángulo no equilátero, podés ajustar los anchos de los bordes laterales por separado. border-left: 30px solid transparent y border-right: 10px solid transparent crea un triángulo inclinado a la derecha.
Triángulos con borde
Hacer un triángulo con borde (outline) es más complicado con el truco de bordes: necesitás dos triángulos superpuestos, uno más chico encima del otro. Con clip-path, podés usar un drop-shadow filter o un SVG.
Performance
El truco con bordes es extremadamente liviano: el browser ya tiene optimizado el rendering de borders. Para tooltips que aparecen muchas veces, vale la pena. Si tu UI tiene 200 tooltips simultáneos (poco probable pero posible en dashboards), elegí siempre el truco de borders.
Cuándo NO usar triángulos CSS
Para iconos complejos, formas geométricas no triangulares, o cualquier cosa que requiera color compuesto, gradientes o trazos: SVG es la herramienta correcta. Los triángulos CSS son una solución específica para una forma muy específica.