¿Cómo dibujo un triángulo en puro CSS sin SVG?
El truco clásico de CSS usado desde ~2008: un `<div>` con dimensiones cero (width: 0, height: 0) y solo un borde coloreado, el resto transparente, parece un triángulo. El navegador corta los bordes en diagonal donde se encuentran, así que un solo borde coloreado en un elemento sin tamaño forma un triángulo.
Esto pesa 0 KB, cero dependencias, soporte GPU completo, perfecto para: flechas en dropdowns, colas en tooltips, separadores de breadcrumb. Sin SVG, sin PNG, sin icon font.
Aquí eliges una dirección (8 variantes: 4 flechas + 4 diagonales), un tamaño y un color. El CSS está listo para copiar.
Cómo usar
- Elige una dirección pulsando uno de los 8 iconos (arriba/abajo/izq/dcha + 4 esquinas).
- El slider de tamaño (4-200px) controla el triángulo. El triángulo es el doble de ancho que alto para las 4 direcciones cardinales.
- Color con el picker o escribe un hex. Funciona cualquier color CSS (#hex, rgb, oklch, nombres).
- Copia el CSS y pega en tu hoja de estilos. Aplica la clase `.triangle` a un `<div>` o `<span>` vacío.
- Truco: para triángulos no equiláteros cambia width/height a valores distintos (p. ej. borde inferior mayor = triángulo más alto).
Cuándo ayuda
Un triángulo CSS es una primitiva UI ubicua. Los tres usos más comunes:
- Flecha de dropdown (el pequeño chevron junto a un select). Muestra que la lista se puede abrir. Muy ligero, rápido por GPU, funciona en todas partes.
- Cola de tooltip / bocadillo. Tooltip aparece sobre un elemento, un pequeño triángulo dice "estamos apuntando a este elemento". Clásico.
- Separador de breadcrumb (Inicio > Productos > Categoría). En vez de ">" o "/", un triángulo CSS da una separación sutil y elegante.
- Flechas next/prev de carrusel. Un triángulo en vez de un icono SVG = más ligero, rápido por GPU.
- Indicador de modal o popover. El triángulo en el borde del modal dice "esto apunta al elemento X".
- Decoración corner ribbon (4 variantes diagonales). Un triángulo en la esquina de una tarjeta = vibe retro-tech o un badge ribbon "¡NUEVO!".
Para añadir una sombra bajo un triángulo (¡funciona!), usa `filter: drop-shadow()` (`box-shadow` no funciona, no hay caja real). Para animación el triángulo se transforma como cualquier elemento. Para formas más complejas mira el generador clip-path.