Olá amigos. Realmente nesse exercício eu me perdi. Não entendi porque as bordas ficaram com aparência de outras figuras geométricas que não sejam quadradados (box model). Seguindo as dicas dos outros posts mudando as cores de cada borda separadamente ainda assim não entendi. Por exemplo o código abaixo:
#triangulo {
border-left: 30px solid red;
border-bottom: 30px solid green;
border-top: 30px solid blue;
border-right: 30px solid yellow;
width: 200px;
}
Ele pega uma div sem conteúdo chamada "triangulo" e determina as bordas separadamente com a mesma largura. Pra mim esse código deveria gerar uma caixa QUADRADA (com todas as laterais retas com cores diferentes) que abrigaria um conteúdo de tamanho 200px. Porém o resultado é uma caixa com as bordas esquerda e direita em formato de triangulo e bordas superior e inferior em formato de trapézio.
Por exemplo, no código abaixo, o resultado é uma caixa com as laterais retas de fato (ou não?)
#triangulo {
border: 30px solid red;
width: 200px;
height: 200px;
}
E definindo apenas a borda esquerda também temos uma linha reta
#triangulo {
border-left: 30px solid red;
width: 200px;
height: 200px;}
Porque definindo as bordas individualmente elas ficaram parecendo figuras geométricas sem ser retângulos ou quadrados?
