Come creare un semi cerchio con CSS

CSS ti consente di creare forme diverse come rettangoli, ovali, cerchi, quadrati e altro ancora. Tuttavia, la forma che si trova principalmente nelle applicazioni Web è la forma del cerchio; Perché è facile da realizzare e ampiamente utilizzato per la progettazione di scopi.

Durante la progettazione di un sito Web, l'aggiunta di semi-circoli anziché cerchi dà un aspetto migliore. Inoltre, la formazione di semi-circoli è facile e interessante.

In questo articolo, forniremo una guida su come creare un semicerchio utilizzando CSS.

Come creare un semi cerchio con CSS?

Per creare un semicerchio, useremo il "raggio di confine" proprietà. Questa proprietà ci aiuterà a fare un semicerchio nei seguenti modi:

• Semi Circle dall'alto
• Semi Circle dal fondo
• Semi cerchio da sinistra
• Semi Circle da destra

Elaboriamo ciascuno per uno!

Esempio 1: creare un semi cerchio dall'alto con CSS

Per creare un semicerchio dall'alto, in primo luogo, specificheremo il ""Elemento all'interno del tag del corpo del nostro file HTML.

Html

Ora, imposta le dimensioni adatte per il div, come assegneremo il "larghezza"Valore della proprietà come"180px" E "altezza"Proprietà con valore"90px". Nel passaggio successivo, imposta il "raggio di confine" costo dell'immobile "12rem 12rem 0 0"; Laddove la prima cifra 12Rem taglierà il lato in alto a sinistra del div, il secondo 12Rem taglierà il lato in alto a destra, il terzo e il quarto cifra 0 taglieranno la parte intellomina del div. Infine, per dare un colore al cerchio, utilizzare il “colore di sfondo"Proprietà con il valore"viola".

CSS

div
larghezza: 180px;
Altezza: 90px;
raggio di confine: 12rem 12rem 0 0;
Background-color: viola;

Salva il file HTML con il codice menzionato e aprilo nel browser:

Come puoi vedere, abbiamo creato con successo un semicerchio con la proprietà CSS Border-Radius.

Esempio 2: creare un semi cerchio dal basso con CSS

Per la formazione di un semicerchio dal basso, imposteremo i valori della proprietà del raggio di confine come "0 0 12rem 12rem", Dove i primi due valori rappresentano il raggio di confine in alto a sinistra e in alto a destra. Li abbiamo imposti su 0 per far scomparire completamente la metà superiore del Div. Per il fondo, abbiamo tagliato solo un piccolo lato inferiore a sinistra e in basso a destra impostando i valori su 12Rem.

CSS

div
larghezza: 180px;
Altezza: 90px;
Radius di confine: 0 0 12rem 12rem;
Background-color: viola;

Produzione

Esempio 3: crea un semi cerchio da destra con CSS

Per creare un semicerchio CSS a destra, prima, regolare l'altezza e la larghezza del contenitore in quanto è necessario ottenere la forma corretta del cerchio. Impostare il "larghezza" COME "90px" E "altezza" COME "180px" questa volta. Ancora una volta, utilizza la proprietà del raggio di frontiera con il valore "0 12rem 12rem 0", Dove il primo valore 0 è per il lato sinistro in alto, l'ultimo valore 0 è per il lato inferiore sinistro e il secondo e il terzo valori vengono aggiunti per tagliare il lato in alto a destra e in basso a destra. Applicare questi valori formerà un semicerchio da destra.

CSS

div
larghezza: 90px;
Altezza: 180px;
raggio di confine: 0 12rem 12rem 0;
Background-color: viola;

Produzione

Esempio 4: crea un semi cerchio da sinistra con CSS

Questa volta, specifica la proprietà del raggio di frontiera lungo il valore "12rem 0 0 12rem"; Il primo e l'ultimo valore 12Rem taglierà il lato in alto a sinistra e in basso a sinistra del Div, impostando il secondo e il terzo valore su 0 renderà chiaro il lato in alto a destra e in basso a destra del cerchio. Alla fine, verrà creato il nostro semicerchio sul lato sinistro.

CSS

div
larghezza: 90px;
Altezza: 180px;
Radius di confine: 12rem 0 0 12rem;
Background-color: viola;

Produzione

Abbiamo offerto metodi diversi per creare un semicerchio con CSS.

Conclusione

Per creare un semicerchio, possiamo semplicemente utilizzare il CSS "raggio di confine" proprietà. Il semicerchio può essere creato da un lato all'altro, come a sinistra, a destra, in alto e in basso. Nella proprietà del raggio di confine, il valore iniziale è per la parte in alto a sinistra, il secondo è in alto a destra, il terzo è per la parte in basso a destra e il quarto valore è per il lato in basso a sinistra. Questo articolo ha spiegato come creare un semicerchio con CSS.