Como criar um semi -círculo com CSS

CSS permite que você crie formas diferentes, como retângulos, ovais, círculos, quadrados e mais. No entanto, a forma que é encontrada principalmente nos aplicativos da Web é a forma do círculo; Porque é fácil de fazer e amplamente usado para propósitos.

Ao projetar um site, adicionar semicircles em vez de círculos dão uma aparência melhor. Além disso, a formação de semicirculares é fácil e interessante.

Neste artigo, forneceremos um guia sobre como criar um semicírculo usando CSS.

Como criar um semi -círculo com CSS?

Para fazer um semicírculo, usaremos o “Radio de fronteira" propriedade. Esta propriedade nos ajudará a fazer um semicírculo das seguintes maneiras:

• Semi -círculo do topo
• Semi -círculo de baixo
• Semi -círculo da esquerda
• Semi -círculo da direita

Vamos elaborar cada um por um!

Exemplo 1: Crie um semi -círculo de cima com CSS

Para criar um semicírculo a partir do topo, primeiro, especificaremos o “”Elemento dentro da etiqueta corporal do nosso arquivo HTML.

Html

Agora, defina as dimensões adequadas para a div, como atribuiremos o “largura”Valor da propriedade como“180px" e "altura”Propriedade com valor“90px”. Na próxima etapa, defina o “Radio de fronteira" valor da propriedade "12REM 12REM 0 0”; Onde o primeiro dígito 12Rem aparará o lado superior esquerdo da div, o segundo 12RM aparará o lado superior direito, terceiro e quarto dígito. Por fim, para dar uma cor ao círculo, utilize o “cor de fundo”Propriedade com o valor“roxo”.

CSS

div
Largura: 180px;
Altura: 90px;
Radio de fronteira: 12Rem 12Rem 0 0;
Background-Color: roxo;

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

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

Exemplo 2: Crie um semi -círculo de baixo com CSS

Para a formação de um semicírculo a partir do fundo, definiremos os valores de propriedades do radio de fronteira como “0 0 12REM 12REM”, Onde os dois primeiros valores representam o canto superior esquerdo e superior direito do lado direito-radio. Nós os colocamos como 0 para fazer a metade superior da div desaparecer completamente. Na parte inferior, temos apenas um pequeno lado inferior esquerdo e inferior direito, definindo os valores para 12Rem.

CSS

div
Largura: 180px;
Altura: 90px;
Radio de fronteira: 0 0 12REM 12REM;
Background-Color: roxo;

Saída

Exemplo 3: Crie um semi -círculo da direita com CSS

Para fazer um semicírculo CSS à direita, primeiro, ajuste a altura e a largura do recipiente, pois é necessário obter a forma correta do círculo. Colocou o "largura" como "90px" e "altura" como "180px" desta vez. Novamente, utilize a propriedade do radiato de fronteira com o valor “0 12REM 12REM 0”, Onde o primeiro valor 0 é para o lado superior esquerdo, o último valor 0 é para o lado esquerdo inferior, e o segundo e o 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;
Radio de fronteira: 0 12Rem 12Rem 0;
Background-Color: roxo;

Saída

Exemplo 4: Crie um semi -círculo da esquerda com CSS

Desta vez, especifique a propriedade do radiato de fronteira ao longo do valor “12REM 0 0 12REM”; O primeiro e o último valor 12REM aparará o lado superior esquerdo e inferior esquerdo da div, definindo o segundo e o terceiro valor para 0 deixarão claro o lado superior e inferior direito do círculo. Eventualmente, nosso semi-círculo do lado esquerdo será criado.

CSS

div
Largura: 90px;
Altura: 180px;
Radio de fronteira: 12Rem 0 0 12Rem;
Background-Color: roxo;

Saída

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

Conclusão

Para criar um semicírculo, podemos simplesmente utilizar o CSS “Radio de fronteira" propriedade. O semi-círculo pode ser criado de um lado para o outro, como para a esquerda, direita, superior e inferior. Na propriedade Radio-Radio, 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 lado esquerdo inferior esquerdo. Este artigo explicou como criar um semicírculo com CSS.