Quer adicionar um quadrado ou um retângulo à sua página da web? Veja como fazer isso e muito mais com CSS.
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 o que você precisa fazer é criar um <div> e atribuir-lhe altura e largura .
HTML
<body>
<div class="rec-sq">
<div class="square"></div>
<div class="rectangle"></div>
</div>
</body>CSS
.rec-sq {
display: flex;
gap: 2em;
margin: 2em;
}
.square {
width: 15rem;
height: 15rem;
background: rgb(255, 123, 0);
}
.rectangle {
width: 24rem;
height: 14rem;
background: rgb(0, 119, 128);
}Saída:
Círculo e Elipse
Você só precisa atribuir um raio de borda de 50% a um quadrado e você obterá um círculo. Faça o mesmo com o retângulo para obter uma elipse.
HTML
<div class="rec-sq">
<div class="circle"></div>
<div class="ellipse"></div>
</div>CSS
.circle {
width: 15rem;
height: 15rem;
background: rgb(255, 123, 0);
border-radius: 50%;
}
.ellipse {
width: 24rem;
height: 14rem;
background: rgb(0, 119, 128);
border-radius: 50%;
}Saída:
Triângulos
Usaremos bordas para criar triângulos. Quer saber como isso funciona? Tudo o que você precisa fazer é definir a largura e a altura do triângulo como zero. Isso significa que, avançando, a largura real do elemento será a 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
<body>
<div class="sample"></div>
<div class="triangle"></div>
</body>CSS
//common to all
body {
display: flex;
gap: 5em;
margin: 15em;
}.sample {
height: 8.5em;
width: 8.5em;
border-top: 1em solid #9ee780;
border-right: 1em solid rgb(240, 241, 141);
border-bottom: 1em solid rgb(145, 236, 252);
border-left: 1em solid rgb(248, 115, 106);
}.triangle {
height: 0;
width: 0;
border-top: 5em solid #9ee780;
border-right: 5em solid rgb(240, 241, 141);
border-bottom: 5em solid rgb(145, 236, 252);
border-left: 5em solid rgb(248, 115, 106);
}Saída:
Você pode brincar com a altura e a cor das bordas para obter diferentes tipos de triângulos. Por exemplo, você pode criar um triângulo apontando para cima, dando à 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 de ângulo reto por brincar com border-width e border-color .
HTML
<body>
<div class="triangle-up"></div>
<div class="triangle-right"></div>
<div class="triangle-bottom-right"></div>
</body>CSS
.triangle-up {
height: 0;
width: 0;
border-top: 5em solid transparent;
border-right: 5em solid transparent;
border-bottom: 5em solid rgb(145, 236, 252);
border-left: 5em solid transparent;
}
.triangle-right {
width: 0;
height: 0;
border-style: solid;
border-width: 4em 0 4em 8em;
border-color: transparent transparent transparent rgb(245, 149, 221);
}
.triangle-bottom-right {
width: 0;
height: 0;
border-style: solid;
border-width: 8em 0 0 8em;
border-color: transparent transparent transparent rgb(151, 235, 158);
}Saída:
Criação de formas avançadas usando CSS
Você pode usar :: before e :: after pseudo-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 uma classe = ”estrela” , os outros dois lados usando o elemento :: after , e o último lado usando o elemento :: before .
HTML
<div class="star-five"></div>CSS
.star-five {
margin: 3.125em 0;
position: relative;
display: block;
width: 0em;
height: 0em;
border-right: 6.25em solid transparent;
border-bottom: 4.3em solid rgb(255, 174, 81);
border-left: 6.25em solid transparent;
transform: rotate(35deg);
}
.star-five:before {
border-bottom: 5em solid rgb(255, 174, 81);
border-left: 2em solid transparent;
border-right: 1.875em solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
transform: rotate(-35deg);
}
.star-five:after {
position: absolute;
display: block;
top: 3px;
left: -105px;
width: 0;
height: 0;
border-right: 6.25em solid transparent;
border-bottom: 4.3em solid rgb(255, 174, 81);
border-left: 5.95em solid transparent;
transform: rotate(-70deg);
content: '';
}Saída:
Pentágono
Você pode criar um pentágono combinando um trapézio e um triângulo. Use a forma das propriedades de borda e posição e agrupe-as.
HTML
<div class="pentagon"></div>CSS
.pentagon {
position: relative;
width: 10em;
box-sizing: content-box;
border-width: 10em 5em 0;
border-style: solid;
border-color: rgb(7, 185, 255) transparent;
margin-top: 20rem;
margin-left: 10rem;
}
.pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -18em;
left: -5em;
border-width: 0 10em 8em;
border-style: solid;
border-color: transparent transparent rgb(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, usaremos as propriedades da borda para criar esses triângulos.
HTML
<div class="diamond"></div>CSS
.diamond {
width: 0;
height: 0;
position: relative;
top: -3em;
border: 3em solid transparent;
border-bottom-color: rgb(129, 230, 255);
}
.diamond:after {
content: '';
width: 0;
height: 0;
position: absolute;
left: -3em;
top: 3em;
border: 3em solid transparent;
border-top-color: 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
<div class="diamond-shield"></div>CSS
.diamond-shield
{
width: 0;
height: 0;
border: 3em solid transparent;
border-bottom: 1.25em solid rgb(71, 194, 231);
position: relative;
top: -3em;
}
.diamond-cut:after {
content: '';
position: absolute;
left: -3em;
top: 1.25em;
width: 0;
height: 0;
border: 3em solid transparent;
border-top: 4.4em solid rgb(71, 194, 231);
}Saída:
Coração
O formato do coração é um pouco difícil, mas você pode fazer isso usando os pseudo-elementos :: before e :: after . Você pode usar diferentes valores de transformação para girá-los de diferentes ângulos até que formem perfeitamente o formato de um coração. Por fim, você pode definir a origem da transformação para definir o ponto em torno do qual a transformação é aplicada.
HTML
<div class="heart"></div>CSS
.heart {
width: 6.25em;
height: 55em;
position: relative;
}
.heart:before,
.heart:after {
content: "";
width: 3em;
height: 5em;
position: absolute;
left: 3em;
top: 0;
background: red;
border-radius: 3em 3em 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 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.