E ai pessoal blz? Então, eu tava testando esse código no exercício:
border-bottom: 30px solid red;
border-left: 30px solid blue;
border-right: 30px solid green;
border-top: 30px solid black
width: 0;
margin: 20px;
E quando eu fui analisar por meio do inspetor do chrome eu percebi o seguinte:
Quando eu deixo ativado apenas o border-bottom, não aparece nada na página. Quando eu ativo a linha border-left, ai sim aparece dois triângulos: https://prnt.sc/frhd4q. Essa é minha primeira dúvida. Não consegui entender pq não apareceu um triângulo vermelho apenas com o "border-bottom".
E a minha segunda dúvida é:
Quando eu ativo apenas...
border-bottom: 30px solid red;
border-left: 30px solid blue;
border-right: 30px solid green;
width: 0;
margin: 20px;
...sem a linha "border-top: 30px solid black" a seguinte forma geométrica aparece: https://prnt.sc/frhdfn . Então minha dúvida é o seguinte: Por que o tamanho do triângulo azul e verde não são do mesmo tamanho que o triângulo vermelho? sendo que todos são de 30px? Apenas quando eu ativo o border-top os 4 triângulos se formam perfeitamente como nessa figura: https://prnt.sc/frhefz.
Então é isso, não estou conseguindo enxergar muito bem essas bordas. Espero ter explicado bem minhas dúvidas, obrigadoo xD