Como fazer formas básicas e avançadas com CSS puro

Você já viu um site de CSS puro onde cada elemento é finalizado por meio de CSS? CSS faz mais do que apenas estilizar elementos. As formas CSS permitem que os web designers criem caminhos personalizados, como um triângulo, círculos, polígonos e muito mais. Dessa forma, você não é mais obrigado a inserir uma imagem flutuante com um fundo transparente, apenas para ficar desapontado com uma caixa retangular ao redor dela.

Neste artigo, usaremos formas CSS e alguns valores funcionais para codificar formas diferentes.

Desenho de formas CSS básicas

Vamos começar com as formas básicas como quadrado, retângulo, triângulo, círculo e elipse.

Quadrado e Retângulo

Quadrado e retângulo são as formas mais fáceis de fazer em CSS. Tudo que você precisa fazer é criar um e dar-lhe um altura e um largura.

HTML

CSS

.rec-sq {
display: flex;
lacuna: 2em;
margem: 2em;
}
.quadrado {
largura: 15rem;
altura: 15rem;
fundo: rgb (255, 123, 0);
}
.retângulo {
largura: 24 rem;
altura: 14 rem;
fundo: rgb (0, 119, 128);
}

Saída:

Círculo e Elipse

Você só precisa atribuir um raio de fronteira de 50% para um quadrado e você obterá um círculo. Faça o mesmo com o retângulo para obter uma elipse.

HTML

CSS

.circle {
largura: 15rem;
altura: 15rem;
fundo: rgb (255, 123, 0);
raio da borda: 50%;
}
.ellipse {
largura: 24 rem;
altura: 14 rem;
fundo: rgb (0, 119, 128);
raio da borda: 50%;
}

Saída:

Triângulos

Usaremos bordas para criar triângulos. Quer saber como isso funciona? Tudo que você precisa fazer é definir o largura e altura do triângulo a zero. Significa, avançando, o largura real do elemento será o largura da borda. Além disso, você já deve saber que as bordas das bordas são diagonais de 45 graus entre si. Dê cores diferentes a cada borda e defina qualquer uma delas como transparente. No final das contas, você terá seu triângulo.

HTML

CSS

// comum a todos
corpo {
display: flex;
lacuna: 5em;
margem: 15em;
}.amostra {
altura: 8,5em;
largura: 8,5em;
borda superior: 1em sólido # 9ee780;
borda direita: 1em sólido rgb (240, 241, 141);
borda inferior: 1em sólido rgb (145, 236, 252);
borda esquerda: 1em sólido rgb (248, 115, 106);
} .triangle {
altura: 0;
largura: 0;
borda superior: 5em sólido # 9ee780;
borda direita: 5em sólido rgb (240, 241, 141);
borda inferior: 5em sólido rgb (145, 236, 252);
borda esquerda: 5em sólido rgb (248, 115, 106);
}

Saída:

Você pode brincar com altura e Cor da borda para obter diferentes tipos de triângulos. Por exemplo, você pode criar um triângulo apontando para cima, dando o borda inferior uma cor sólida enquanto todas as outras bordas são definidas como transparentes. Além disso, você pode criar um triângulo apontando para a direção certa ou um triângulo retângulo brincando com largura da borda e Cor da borda.

HTML

CSS

.triangle-up {
altura: 0;
largura: 0;
borda superior: 5em transparente sólido;
borda direita: 5em sólido transparente;
borda inferior: 5em sólido rgb (145, 236, 252);
borda esquerda: 5em sólido transparente;
}
.triangle-right {
largura: 0;
altura: 0;
estilo de borda: sólido;
largura da borda: 4em 0 4em 8em;
borda-cor: transparente transparente transparente rgb (245, 149, 221);
}
.triangle-bottom-right {
largura: 0;
altura: 0;
estilo de borda: sólido;
largura da borda: 8em 0 0 8em;
borda-cor: transparente transparente transparente rgb (151, 235, 158);
}

Saída:

Criação de formas avançadas usando CSS

Você pode usar ::antes e ::depois depseudo-elementos para criar formas avançadas. Com o uso inteligente das propriedades de posição e transformação, você pode construir facilmente formas complexas usando CSS puro.

Formato de estrela (5 pontos)

Você precisará manipular as bordas usando o valor de rotação da transformação. A ideia é criar dois lados usando um classe = ”estrela”, os outros dois lados usando o ::depois de elemento, e o último lado usando o ::antes elemento.

HTML

CSS

.star-five {
margem: 3,125em 0;
posição: relativa;
display: bloco;
largura: 0em;
altura: 0em;
borda direita: 6.25em sólido transparente;
borda inferior: 4.3em sólido rgb (255, 174, 81);
borda esquerda: 6,25em sólido transparente;
transformar: girar (35deg);
}
.star-five: antes de {
borda inferior: 5em sólido rgb (255, 174, 81);
borda esquerda: 2em sólido transparente;
borda direita: 1.875em transparente sólido;
posição: absoluta;
altura: 0;
largura: 0;
topo: -45px;
esquerda: -65px;
display: bloco;
contente: '';
transformar: girar (-35deg);
}
.star-five: após {
posição: absoluta;
display: bloco;
topo: 3px;
esquerda: -105px;
largura: 0;
altura: 0;
borda direita: 6.25em sólido transparente;
borda inferior: 4.3em sólido rgb (255, 174, 81);
borda esquerda: 5.95em sólido transparente;
transformar: girar (-70deg);
contente: '';
}

Saída:

Pentágono

Você pode criar um pentágono combinando um trapézio e um triângulo. Usar fronteira e propriedades de posição modelá-los e agrupá-los.

HTML

CSS

.pentagon {
posição: relativa;
largura: 10em;
tamanho da caixa: caixa de conteúdo;
largura da borda: 10em 5em 0;
estilo de borda: sólido;
borda-cor: rgb (7, 185, 255) transparente;
margem superior: 20 rem;
margem esquerda: 10 rem;
}
.pentagon: antes de {
contente: "";
posição: absoluta;
altura: 0;
largura: 0;
topo: -18em;
esquerda: -5em;
largura da borda: 0 10em 8em;
estilo de borda: sólido;
cor da borda: rgb transparente transparente (7, 185, 255);
}

Saída:

Diamante

Agrupe dois triângulos apontando para cima e para baixo usando a posição para criar uma forma de diamante. Sim, vamos usar o fronteira propriedades para criar esses triângulos.

HTML

CSS

.diamond {
largura: 0;
altura: 0;
posição: relativa;
topo: -3em;
borda: 3em sólido transparente;
cor da borda inferior: rgb (129, 230, 255);
}
.diamond: after {
contente: '';
largura: 0;
altura: 0;
posição: absoluta;
esquerda: -3em;
topo: 3em;
borda: 3em sólido transparente;
cor da borda superior: rgb (129, 230, 255);
}

Saída:

Você pode criar uma forma de escudo de diamante alterando a altura do triângulo superior, conforme mostrado abaixo:

HTML

CSS

.diamond-shield
{
largura: 0;
altura: 0;
borda: 3em sólido transparente;
borda inferior: 1,25em rgb sólido (71, 194, 231);
posição: relativa;
topo: -3em;
}
. corte de diamante: após {
contente: '';
posição: absoluta;
esquerda: -3em;
topo: 1,25em;
largura: 0;
altura: 0;
borda: 3em sólido transparente;
borda superior: 4,4em rgb sólido (71, 194, 231);
}

Saída:

Coração

O formato do coração é um pouco difícil, mas você pode fazer isso usando ::antes e ::depois de pseudo-elementos. Você pode usar diferentes valores de transformar para girá-los de diferentes ângulos até que formem perfeitamente um coração. Por fim, você pode definir origem de transformação para definir o ponto em torno do qual a transformação é aplicada.

HTML

CSS

.coração {
largura: 6,25em;
altura: 55em;
posição: relativa;
}
.coração: antes,
.coração: depois de {
contente: "";
largura: 3em;
altura: 5em;
posição: absoluta;
esquerda: 3em;
topo: 0;
fundo: vermelho;
raio da borda: 3em 3em 0 0;
transformar: girar (-45deg);
origem da transformação: 0 100%;
}
.coração: depois de {
esquerda: 0;
transformar: girar (45deg);
origem da transformação: 100% 100%;
}

Saída:

Experiência com formas CSS puras

Agora você deve estar familiarizado com as diferentes imagens CSS puras que podem ser construídas escrevendo algumas linhas de código. Construir um site super-rápido não é mais uma tarefa agitada, pois você sabe como brincar com o código. A melhor parte é que você pode ressoar com a voz da marca manipulando diferentes formas e cores de acordo com sua necessidade. Portanto, continue experimentando e descubra novas maneiras de desenhar formas incríveis puramente por CSS.

Como construir uma barra de navegação responsiva usando HTML e CSS

Chamando todos os desenvolvedores web iniciantes: este tutorial lhe dará as habilidades necessárias para criar suas próprias barras de navegação responsivas usando apenas HTML e CSS!

Leia a seguir

Sobre o autor