Triángulos CSS, múltiples formas | Programar Plus

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 border y un elemento colapsado
  • con clip-path: polygon()
  • con transform: rotate() y overflow: 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 →

(Visited 5 times, 1 visits today)