Come creare un semicerchio con CSS

” all'interno del tag body del nostro file HTML.

---

---

HTML

< div >< / div >

Ora, imposta le dimensioni adatte per il div, ad esempio assegneremo il ' larghezza ” valore della proprietà come “ 180px ' e ' altezza 'immobile di valore' 90px ”. Nel passaggio successivo, imposta ' raggio di confine ' valore della proprietà ' 12rem 12rem 0 0 ”; dove la prima cifra 12rem taglierà la parte in alto a sinistra del div, la seconda 12rem taglierà la parte in alto a destra, la terza e la quarta cifra 0 taglieranno tutta la parte inferiore 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 ;
colore di sfondo : viola ;
}

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

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

Esempio 2: crea un semicerchio dal basso con CSS

Per la formazione di un semicerchio dal basso, imposteremo i valori delle 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 impostati su 0 per far scomparire completamente la metà superiore del div. Per la parte inferiore, abbiamo tagliato solo un po' il lato inferiore sinistro e inferiore destro impostando i valori su 12rem.

CSS

div {
larghezza : 180px ;
altezza : 90px ;
raggio di confine : 0 0 12rem 12rem ;
colore di sfondo : viola ;
}

Produzione

Esempio 3: crea un semicerchio da destra con CSS

Per creare un semicerchio CSS a destra, per prima cosa, regola l'altezza e la larghezza del contenitore in quanto è necessario per ottenere la forma corretta del cerchio. Impostare il ' larghezza ' come ' 90px ' e ' altezza ' come ' 180px ' questa volta. Ancora una volta, utilizza la proprietà border-radius con il valore ' 0 12rem 12rem 0 ”, dove il primo valore 0 è per il lato in alto a sinistra, l'ultimo valore 0 è per il lato in basso a sinistra e il secondo e il terzo valore vengono aggiunti per tagliare il lato in alto a destra e in basso a destra. L'applicazione di questi valori formerà un semicerchio da destra.

CSS

div {
larghezza : 90px ;
altezza : 180px ;
raggio di confine : 0 12rem 12rem 0 ;
colore di sfondo : viola ;
}

Produzione

Esempio 4: crea un semicerchio da sinistra con CSS

Questa volta, specifica la proprietà border-radius lungo il valore ' 12rem 0 0 12rem ”; il primo e l'ultimo valore 12rem taglieranno il lato superiore sinistro e inferiore sinistro del div, impostando il secondo e il terzo valore su 0 elimineranno il lato superiore destro e inferiore destro del cerchio. Alla fine, verrà creato il nostro semicerchio sul lato sinistro.

CSS

div {
larghezza : 90px ;
altezza : 180px ;
raggio di confine : 12rem 0 0 12rem ;
colore di sfondo : viola ;
}

Produzione

Abbiamo offerto diversi metodi 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, ad esempio a sinistra, a destra, in alto e in basso. Nella proprietà border-radius, il valore iniziale è in alto a sinistra, il secondo è in alto a destra, il terzo è in basso a destra e il quarto valore è in basso a sinistra. Questo articolo ha spiegato come creare un semicerchio con CSS.