Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Sobre o assunto formas com bordas

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

2 respostas

Bom dia Icaro,

Sobre o primeiro bloco CSS, faltou um ; no final do border-top

    border-bottom: 30px solid red;
    border-left: 30px solid blue;
    border-right: 30px solid green;
    border-top: 30px solid black; <-
    width: 0;
    margin: 20px;

No segundo caso, pensa na matemática do CSS, você tá falando que um dos lados tem margin de 30px, então você tem dois lados de 30px, ou seja, 60px, então você fica com um retângulo de 30 de altura e 60 de largura.

Espero ter ajudado.

solução!

Vou tentar explicar...

Eles não são do mesmo tamanho pois você coloca 30px para esquerda e 30px para direita, fica numa largura de 60px, mas ao colocar a borda de baixo você coloca somente 30px, por isso o triangulo vermelho fica menor, para eles ficarem iguais você teria que deixar o border-bottom: 60px;

E ao colocar a border-top: 30px; você estará somando 30px que estava faltando acima, ficando um quadrado perfeito de 60 x 60 px.

Sobre sua primeira dúvida, você define a largura de 0px; Ao colocar somente o border-bottom: 30px; ele não vai aparecer nada mesmo, pois não tem dimensão para ele aparecer (0px) E ao adicionar o border-left: 30px; você automaticamente está adicionando os 30px em sua largura, fazendo surgir a borda de baixo.

Meio confuso, mas acho que dá para entender.