Com crear un semicercle amb CSS

” element dins de l'etiqueta del cos del nostre fitxer HTML.

---

---

HTML

< div >< / div >

Ara, configureu les dimensions adequades per al div, com ara assignarem el ' amplada 'valor de la propietat com a' 180 píxels ' i ' alçada 'propietat amb valor' 90 píxels ”. En el següent pas, configureu el ' frontera-radi 'valor de la propietat' 12rem 12rem 0 0 ”; on el primer dígit 12rem retallarà la part superior esquerra del div, el segon 12rem retallarà la part superior dreta, el tercer i quart dígit 0 tallarà la part inferior del div. Finalment, per donar un color al cercle, utilitzeu el ' color de fons 'propietat amb el valor' porpra ”.

CSS

div {
amplada : 180 píxels ;
alçada : 90 píxels ;
frontera-radi : 12 rem 12 rem 0 0 ;
color de fons : porpra ;
}

Deseu el fitxer HTML amb el codi esmentat i obriu-lo al vostre navegador:

Com podeu veure, hem creat amb èxit un semicercle amb propietat CSS border-radius.

Exemple 2: creeu un semicercle des de la part inferior amb CSS

Per a la formació d'un semicercle des de la part inferior, establirem els valors de la propietat del radi de la vora com a ' 0 0 12rem 12rem ”, on els dos primers valors representen el radi de la vora superior esquerre i superior dret. Els hem posat a 0 per fer que la meitat superior del div desaparegui completament. Per a la part inferior, només hem retallat una mica la part inferior esquerra i la part inferior dreta establint els valors a 12rem.

CSS

div {
amplada : 180 píxels ;
alçada : 90 píxels ;
frontera-radi : 0 0 12 rem 12 rem ;
color de fons : porpra ;
}

Sortida

Exemple 3: creeu un semicercle des de la dreta amb CSS

Per fer un semicercle CSS a la dreta, primer, ajusteu l'alçada i l'amplada del contenidor, ja que és necessari per obtenir la forma adequada del cercle. Estableix el ' amplada ' com ' 90 píxels ' i ' alçada ' com ' 180 píxels ' aquesta vegada. De nou, utilitzeu la propietat border-radius amb el valor ' 0 12rem 12rem 0 ”, on el primer valor 0 és per a la part superior esquerra, l'últim valor 0 és per a la part inferior esquerra i el segon i tercer valors s'afegeixen per retallar la part superior dreta i la part inferior dreta. L'aplicació d'aquests valors formarà un semicercle des de la dreta.

CSS

div {
amplada : 90 píxels ;
alçada : 180 píxels ;
frontera-radi : 0 12 rem 12 rem 0 ;
color de fons : porpra ;
}

Sortida

Exemple 4: creeu un semicercle des de l'esquerra amb CSS

Aquesta vegada, especifiqueu la propietat border-radius al costat del valor ' 12rem 0 0 12rem ”; el primer i l'últim valor 12rem retallarà la part superior esquerra i la part inferior esquerra del div, establint el segon i el tercer valor a 0, deixarà clar la part superior dreta i inferior dreta del cercle. Finalment, es crearà el nostre semicercle esquerre.

CSS

div {
amplada : 90 píxels ;
alçada : 180 píxels ;
frontera-radi : 12rem 0 0 12rem ;
color de fons : porpra ;
}

Sortida

Hem ofert diferents mètodes per crear un semicercle amb CSS.

Conclusió

Per crear un semicercle, simplement podem utilitzar el CSS ' frontera-radi ' propietat. El semicercle es pot crear de costat a costat, com a esquerra, dreta, superior i inferior. A la propietat border-radius, el valor inicial és per a la part superior esquerra, el segon és per a la part superior dreta, el tercer és per a la part inferior dreta i el quart valor és per a la part inferior esquerra. Aquest escrit ha explicat com crear un semicercle amb CSS.