¿Cómo funcionan los triángulos CSS?
Hay muchas formas CSS diferentes en Trucos CSS - Formas de CSS y estoy particularmente desconcertado con un triángulo:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}<div id="triangle-up"></div>¿Cómo y por qué funciona?
Triángulos CSS: una tragedia en cinco actos
Como dijo Alex , los bordes de igual ancho se topan entre sí en ángulos de 45 grados:
Cuando no tienes borde superior, se ve así:
Luego le das un ancho de 0...
...y una altura de 0...
...y finalmente, haces transparentes los dos bordes laterales:
Eso da como resultado un triángulo.
Los bordes utilizan un borde en ángulo donde se cruzan (ángulo de 45° con bordes del mismo ancho, pero cambiar el ancho de los bordes puede sesgar el ángulo).
div {
width: 60px;
border-width: 30px;
border-color: red blue green yellow;
border-style: solid;
}<div></div>Eche un vistazo a jsFiddle .
Al ocultar ciertos bordes, puedes obtener el efecto de triángulo (como puedes ver arriba al hacer que las diferentes partes sean de diferentes colores). transparentSe utiliza a menudo como color de borde para lograr la forma del triángulo.
