Como criar um semi-círculo com CSS

” dentro da tag body do nosso arquivo HTML.

---

---

HTML

< div >< / div >

Agora, defina as dimensões adequadas para o div, como atribuiremos o “ largura ” valor da propriedade como “ 180px ' e ' altura ” imóvel com valor “ 90px ”. Na próxima etapa, defina o ' raio de borda ' valor da propriedade ' 12rem 12rem 0 0 ”; onde o primeiro dígito 12rem cortará o lado superior esquerdo da div, o segundo 12rem cortará o lado superior direito, o terceiro e o quarto dígito 0 cortarão a parte inferior da div. Por último, para dar uma cor ao círculo, utilize o “ cor de fundo ” imóvel com o valor “ roxo ”.

CSS

div {
largura : 180px ;
altura : 90px ;
raio de borda : 12rem 12rem 0 0 ;
cor de fundo : roxo ;
}

Salve o arquivo HTML com o código mencionado e abra-o em seu navegador:

Como você pode ver, criamos com sucesso um semicírculo com a propriedade CSS border-radius.

Exemplo 2: Criar um semicírculo de baixo com CSS

Para a formação de um semicírculo a partir da parte inferior, definiremos os valores da propriedade border-radius como “ 0 0 12rem 12rem ”, onde os dois primeiros valores representam o raio da borda superior esquerdo e superior direito. Nós os configuramos para 0 para fazer com que a metade superior da div desapareça completamente. Para a parte inferior, apenas aparamos um pouco a parte inferior esquerda e a parte inferior direita, definindo os valores para 12rem.

CSS

div {
largura : 180px ;
altura : 90px ;
raio de borda : 0 0 12rem 12rem ;
cor de fundo : roxo ;
}

Resultado

Exemplo 3: Crie um semicírculo da direita com CSS

Para fazer um semicírculo CSS à direita, primeiro ajuste a altura e a largura do contêiner, pois é necessário obter a forma adequada do círculo. Colocou o ' largura ' Como ' 90px ' e ' altura ' Como ' 180px ' desta vez. Novamente, utilize a propriedade border-radius com o valor “ 0 12rem 12rem 0 ”, onde o primeiro valor 0 é para o lado superior esquerdo, o último valor 0 é para o lado inferior esquerdo e o segundo e terceiro valores são adicionados para aparar o lado superior direito e inferior direito. A aplicação desses valores formará um semicírculo da direita.

CSS

div {
largura : 90px ;
altura : 180px ;
raio de borda : 0 12rem 12rem 0 ;
cor de fundo : roxo ;
}

Resultado

Exemplo 4: Criar um semicírculo da esquerda com CSS

Desta vez, especifique a propriedade border-radius junto com o valor “ 12rem 0 0 12rem ”; o primeiro e o último valor 12rem cortarão os lados superior esquerdo e inferior esquerdo da div, definir o segundo e terceiro valor como 0 fará com que os lados superior direito e inferior direito do círculo fiquem claros. Eventualmente, nosso semicírculo do lado esquerdo será criado.

CSS

div {
largura : 90px ;
altura : 180px ;
raio de borda : 12rem 0 0 12rem ;
cor de fundo : roxo ;
}

Resultado

Oferecemos diferentes métodos para criar um semicírculo com CSS.

Conclusão

Para criar um semicírculo, podemos simplesmente utilizar o CSS “ raio de borda ' propriedade. O semicírculo pode ser criado de um lado para o outro, como para a esquerda, para a direita, para cima e para baixo. Na propriedade border-radius, o valor inicial é para o canto superior esquerdo, o segundo para o canto superior direito, o terceiro para o canto inferior direito e o quarto valor para o canto inferior esquerdo. Este artigo explicou como criar um semicírculo com CSS.