Criando formas geométricas com bordas CSS
Introdução
As CSS possibilitam a criação de formas geométricas com simples declarações de estilos para um elemento da marcação. Uma das propriedades CSS adequadas à construção de formas geométricas é a propriedade border, a outra, com o uso de gradientes. (Nota: À época em que este tutorial foi publicado não existia a funcionalidade gradiente nas CSS).
O objetivo deste tutorial é mostrar e exemplificar algumas técnicas de criação de formas geométricas com uso da propriedade border.
Propriedade CSS border
Se você não está seguro de como escrever regras para esta propriedade, sugiro uma leitura no Tutorial: A propriedade border e uma passada nesta página interativa para estudo da propriedade border.
Usaremos bordas sólidas coloridas para ilustrar os exemplos e a regra CSS mostrada a seguir:
seletor { border: 10px solid #f00; }Na regra CSS estamos definindo as 4 bordas na cor vermelha (#f00) estilo sólido e com 10px de espessura. A ordem de declaração dos três valores da propriedade é indiferente, contudo é de boa prática escolher uma ordem de declaração, a gosto do desenvolvedor e adotá-la em todas as folhas de estilo. Eu uso a ordem conforme mostrada: espessura, estilo e cor.
Aplicando bordas coloridas
Talvez você já tenha aplicado bordas em diversos elementos com variadas espessuras e de diferentes estilos. Mas, já havia pensado em aplicar bordas de cores diferentes em cada um dos lados de um elemento? Pois é, efeito vai ser exatamente aquele que estamos pensando:
Vai ficar um carnaval
Mas, vamos em frente para ver no que isso vai dar.
Observe as 4 figuras (ops! figuras?) obtidas com uso dos códigos a seguir.
Na verdade não são imagens, são quatro elementos DIV nos quais foram aplicadas bordas coloridas de espessuras diferentes, conforme as condições descritas a seguir.
- Todos os 4 DIV são quadrados de 30px X 30px;
- As bordas, a partir do topo e no sentido horário têm a seguinte sequência de cores; vermelha, verde, azul e amarela;
- As espessuras das bordas são de 5px, 10px, 25px e 50px para cada um dos DIV respectivamente.
O código
Vamos examinar os códigos para o terceiro DIV da sequência mostrada (aquele com borda de 25px).
<div class="tres"></div>div.tres {
width:30px;
height:30px;
border: 25px solid; /* As 4 bordas sólidas com 25px de espessura */
border-color: #f00 #0f0 #00f #fc0; /* cores: topo, direita, inferior, esquerda */
}Clique os botões para alterar o Box Model dos elementos div mostrados anteriormente e observe o resultado. (explicação a seguir)
Observe como se formam as formas geométricas: Enquanto a soma das espessuras da borda esquerda com a borda direita não ultrapassa a largura do DIV e o mesmo acontece com as bordas superior e inferior em relação a altura, existe um "quadradinho branco" no centro cujas dimensões são exatamente o que faltou na soma para completar os 30px do DIV. É o caso dos primeiro e segundo DIV onde:
5px + 5px = 10px => resta um quadradinho de 30px - 10px = 20px de lado.
10px + 10px = 20px => resta um quadradinho de 30px - 20px = 10px de lado.
Por outro lado, se aquelas somas ultrapassarem a largura do DIV o "quadradinho branco" desaparece e as dimensões do DIV crescem para um valor igual a soma das espessuras das bordas. É o caso dos terceiro e quarto DIV onde:
25px + 25px = 50px => DIV cresce para 50px de lado.
50px + 50px = 100px => DIV cresce para 100px de lado.
É importante ressaltar que o resultado observado nos quatro DIV anteriores ocorre em elementos para os quais tenha sido adotado o Box Model Corrigido (box-sizing: border-box) para o qual as espessuras das bordas são computadas nas dimensões do box (width e height). É o caso desta página.
Para o Box Model do W3C os quatro DIV serão sempre um quadrado de 30px x 30px com as bordas por fora. Uma ilusão de ótica fará com que eles pareçam de dimensões diferentes, diminuindo da esquerda para a direita. Ver figura a seguir que esclarece os dois Box Model.
E se zerarmos as dimensões do DIV?
Nos exemplos mostrados acima foi definida uma largura e uma altura para os DIV iguais a 30px.
Observe a seguir, o que acontece se estas dimensões forem definidas como sendo 0 (zero), ou seja, width: 0; e height: 0;.
O código
Neste caso o código é idêntico ao anterior exceto que os DIV tiveram suas dimensões zeradas.
Há um bug no IE 6 (arg!) quando zeramos as dimensões de um elemento como foi sugerido aqui. Para resolver acresente a declaração line-height: 0;. Comprove você mesmo, testando o código com e sem esta declaração (é ruim heim!).
Mudando as cores das bordas
Vamos usar quarto DIV iguais para aplicar a mesma cor em bordas adjacentes e observar o efeito. As cores serão conforme mostrado na listagem a seguir.
- Primeiro DIV: bordas do topo e da direita vermelhas;
- Segundo DIV: bordas da direita e inferior verdes;
- Terceiro DIV: bordas inferior e da esquerda azuis;
- Quarto DIV: bordas da esquerda e do topo amarelas;
Observe o resultado
O código
O código é para o segundo DIV da sequência mostrada: bordas da direita e inferior verdes.
<div class="dois"></div>CSS
div.dois {
line-height:0; /* correção para IE (arg!) */
width:0;
height:0;
border: 50px solid;
border-color: #f00 #0f0 #0f0 #fc0;
}Mudando a espessura das bordas
Vamos alterar a espessura das bordas do topo e inferior, mantendo as bordas da esquerda e da direita com a mesma espessura. Observe com atenção o seguinte, sabendo que os DIV tiveram suas dimensões zeradas e o acréscimo das bordas resultou em um quadrado de 100px x 100px.
- Para o primeiro DIV da sequência abaixo é fácil concluir que trata-se de um DIV com espessura das 4 bordas iguais a 50px, pois como cada borda tem 50px a soma é os 100px de lado;
- Observe os três outros DIV da sequência. As bordas laterais (amarela e verde) em todas elas, têm espessura igual a 50px e como são duas, somam 100px. As bordas do topo e inferior (vermelha e azul) em todas elas, têm espessura diferente, contudo também somam 100px.
O código
O código mostrado a seguir é para o terceiro DIV da sequência mostrada que tem bordas da direita e da esquerda com 50px e bordas superior com 10px e inferior com 90px.
<div class="tres"></div>div.tres {
line-height:0;
width:0;
height:0;
border-style: solid;
border-color: #f00 #0f0 #00f #fc0;
border-width: 10px 50px 90px;
}Combinando espessuras diferentes com uma largura fixa
Esteja seguro de que entendeu como são obtidos os efeitos mostrados antes de continuar, porque agora usaremos a técnica anterior em um DIV com uma largura diferente de zero e altura igual a zero, ou seja, vamos acresentar declarar uma largura para obter formas trapezoidais.
Escolhemos para nosso exemplo uma largura do DIV igual a 30px. Assim os cálculos a fazer são.
Para obter uma largura total do DIV igual a 100px => 30px + border-left + border-right,
ou seja, a soma das margens laterais deve ser 70px.
Para simplificar iremos adotar as margens laterais iguais a 35px cada e margens do topo e inferior com espessuras que somem 100px, pois a altura do DIV é 0 (zero).
O código
O código é para o terceiro DIV da sequência mostrada que conforme vimos tem largura de 30px, bordas da direita e da esquerda com 35px e adotamos bordas superior com 10px e inferior com 90px, somando 100px.
<div class="tres"></div>div.tres {
line-height:0;
width:30px;
height:0;
border-style: solid;
border-color: #f00 #0f0 #00f #fc0;
border-width: 10px 35px 90px;
};Combinando espessuras diferentes com uma altura fixa
O raciocínio e os cálculos são idênticos ao anterior e o resultado é mostrado a seguir.
O código
O código é para o terceiro DIV da sequência mostrada que tem altura de 30px, bordas da direita e da esquerda com 50px e adotamos bordas superior de 10px e inferior de 60px somando 70px.
<div class="tres"></div>;div.tres {
line-height:0;
width:0;
height:30px;
border-style: solid;
border-color: #f00 #0f0 #00f #fc0;
border-width: 10px 50px 60px;
}As quatro bordas com espessuras diferentes
Tendo entendido como foram obtidos os efeitos acima fica fácil ousar combinações mais complexas como as mostradas a seguir. Os DIV agora têm dimensão de 210px para largura e 100px para altura. Observando o primeiro DIV é imediato concluir o seguinte.
borda do topo 0 (zero) e borda inferior 100px pois o azul ocupa toda a altura e soma da borda esquerda com a borda direita igual a 210px.
O código
O código é para o primeiro DIV da sequência mostrada
<div class="um"></div>div.um {
line-height:0;
width:0;
height:0;
border-style: solid;
border-color: #f00 #0f0 #00f #fc0;
border-width: 0 160px 100px 50px;
}Como exercício e verificação do seu aprendizado escreva o código para obter o efeito mostrado no segundo da sequência anterior. Dica: utilize o mesmo código do primeiro DIV mudando apenas as espessuras das bordas.
Variação do efeito anterior
Observe agora que os dois efeitos a seguir foram obtidos simplesmente mudando a cor de uma das bordas dos DIV conformemostrados anteriormente (compare estes DIV com as anteriores).
Como exercício e verificação do seu aprendizado escreva o código para obter o efeito mostrado nos dois DIV mostrados a seguir.
Juntando efeitos
Com os conceitos estudados neste tutorial você já pode dar tratos a sua imaginação e começar a obter formas incríveis com uso da propriedade border das CSS. O que acontecerá se eu juntar dois ou três ou mais DIV um ao lado do outro e/ou em cima um do outro e/ou colocar um dentro de outro e por aí vai numa combinação sem limites de possibilidades e de criação de efeitos.
Mostro a seguir uma forma bem simples constituida de um hexágono (polígono de seis lados) na cor laranja, inscrito em um retângulo de fundo verde e lados azuis.
Como obter este efeito? Existem várias maneiras e a que eu adotei é a seguinte. O retângulo é um DIV com borda azul de 25px de espessura e dimensões de 210px x 160px
Dentro deo DIV existem dois DIV um em cima do outro destinados a formar as metades superior e inferior do hexágono. Estas metades foram construidas conforme o efeito da figura 4 no título "Combinando espessuras diferentes com uma largura fixa.
Para ajustar os DIV dentro do retângulo usei a propriedade float-left. Mais detalhes no código mostrado a seguir.
A forma mostrada a seguir foi criada em 2006 quando o tutorial foi escrito quando vigora o Box Model W3C e hoje está "quebrada".
A forma mostrada a seguir foi criada em 2016 quando o tutorial foi atualizado e a página usa o Box Model corrigido e hoje está certa.
Clique os botões de mudança dos Box Model mostrados no título "Aplicando bordas coloridas" e volte aqui para observar os efeitos nos dois casos do Box Model.
O código
A seguir o código do Box Model W3C.
<div class="retangulo">
<div class="metade-superior"></div>
<div class="metade-inferior"></div>
</div>div.retangulo {
line-height:0;
width:200px;
height:160px;
border: 25px solid #00f;
}
div.metade-superior, div.metade-inferior {
float:left;
width:100px;
height:0px;
margin:0;
line-height:0;
border-style:solid;
}
div.metade-superior {
border-width:0 50px 80px ;
border-color:#fff #0f0 #fc0 #0f0;
}
div.metade-inferior {
border-width:80px 50px 0;
border-color: #fc0 #0f0 #fff #0f0;
}Conclusões
Mostrei neste tutorial as técnicas básicas para obter efeitos que possibilitam construir algumas formas geométricas com uso da propriedade border das CSS. As possibilidades são muitas. Faça suas experiências.
Os fundamentos e a inspiração para escrever este tutorial veio de Slant Demo
Compartilhe essa matéria com seus amigos
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.