Me gusta el Consejo rápido de Adam Laki: Triángulos CSS porque cubre ese hecho omnipresente sobre las técnicas de front-end: siempre hay muchas formas de hacer lo mismo. En este caso, se puede dibujar un triángulo:
- con
bordery un elemento colapsado - con
clip-path: polygon() - con
transform: rotate()yoverflow: hidden - con glifos como ▼
Yo diría que la forma en que normalmente he hecho triángulos a lo largo de los años es con el truco del borde, pero creo que mi forma favorita ahora es usar clip-path. Un código como este es bastante claro, comprensible y fácil de mantener para mí: clip-path: polygon(50% 0, 0 100%, 100% 100%); Cerebro: ¡Medio superior! ¡Abajo a la derecha! ¡Abajo a la izquierda! ¡Triángulo!
Mi método de 2nd Place va a una opción que no estaba en la lista de Adam: inline <svg>! Este tipo de cosas es casi tan amigable para el cerebro: <polygon points="0,0 100,0 50,100"/>.
Enlace directo →