Formas com Bordas no CSS

Para poder visualizar melhor a ideia de como foi feito o triângulo, você pode tentar mudar as cores das bordas, dessa maneira:

div{
    border-left: 30px solid red;
    border-bottom: 30px solid yellow;
    border-top: 30px solid green;
    border-right: 30px solid blue;
    width: 0px;
}

No caso do código mostrado como resolução, o border-top e border-right estão transparentes, e o border-bottom está red.

Obrigado Renato,

Desta forma fica realmente mais fácil de compreender.

No caso do ângulo reto, não seria necessário também um valor height: 0px? Só assim consegui.

Eu consegui criar o triângulo reto fazendo apenas isso:

nav div {
    border-bottom: 50px solid red;
    border-right: 50px solid transparent;
    width: 0;
}

O que acham? É válido?