Comment créer un demi-cercle avec CSS

” à l'intérieur de la balise body de notre fichier HTML.

---

---

HTML

< div >< / div >

Maintenant, définissez les dimensions appropriées pour la div, comme nous allons attribuer le ' largeur « valeur de la propriété en tant que » 180px ' et ' la taille « propriété avec valeur » 90px ”. À l'étape suivante, définissez le ' rayon de bordure ' valeur de la propriété ' 12 rem 12 rem 0 0 ”; où le premier chiffre 12rem coupera le côté supérieur gauche de la div, le deuxième 12rem coupera le côté supérieur droit, les troisième et quatrième chiffres 0 découperont la partie inférieure de la div. Enfin, pour donner une couleur au cercle, utilisez le ' Couleur de l'arrière plan « propriété avec la valeur » violet ”.

CSS

div {
largeur : 180px ;
la taille : 90px ;
rayon de bordure : 12 rem 12 rem 0 0 ;
Couleur de l'arrière plan : violet ;
}

Enregistrez le fichier HTML avec le code mentionné et ouvrez-le dans votre navigateur :

Comme vous pouvez le voir, nous avons réussi à créer un demi-cercle avec la propriété CSS border-radius.

Exemple 2 : Créer un demi-cercle à partir du bas avec CSS

Pour la formation d'un demi-cercle à partir du bas, nous définirons les valeurs de la propriété border-radius comme ' 0 0 12 rem 12 rem », où les deux premières valeurs représentent le rayon de bordure supérieur gauche et supérieur droit. Nous les avons mis à 0 pour faire disparaître complètement la moitié supérieure de la div. Pour le bas, nous avons seulement rogné un peu en bas à gauche et en bas à droite en réglant les valeurs sur 12rem.

CSS

div {
largeur : 180px ;
la taille : 90px ;
rayon de bordure : 0 0 12 rem 12 rem ;
Couleur de l'arrière plan : violet ;
}

Production

Exemple 3 : Créer un demi-cercle à partir de la droite avec CSS

Pour créer un demi-cercle CSS vers la droite, commencez par ajuster la hauteur et la largeur du conteneur, car il est nécessaire d'obtenir la forme appropriée du cercle. Met le ' largeur ' comme ' 90px ' et ' la taille ' comme ' 180px ' cette fois. Encore une fois, utilisez la propriété border-radius avec la valeur ' 0 12 rem 12 rem 0 », où la première valeur 0 est pour le côté supérieur gauche, la dernière valeur 0 est pour le côté inférieur gauche, et les deuxième et troisième valeurs sont ajoutées pour couper le côté supérieur droit et inférieur droit. L'application de ces valeurs formera un demi-cercle à partir de la droite.

CSS

div {
largeur : 90px ;
la taille : 180px ;
rayon de bordure : 0 12 rem 12 rem 0 ;
Couleur de l'arrière plan : violet ;
}

Production

Exemple 4 : Créer un demi-cercle à partir de la gauche avec CSS

Cette fois, spécifiez la propriété border-radius le long de la valeur ' 12 rem 0 0 12 rem ”; la première et la dernière valeur 12rem rogneront les côtés supérieur gauche et inférieur gauche de la div, le réglage de la deuxième et de la troisième valeur sur 0 dégagera les côtés supérieur droit et inférieur droit du cercle. Finalement, notre demi-cercle de gauche sera créé.

CSS

div {
largeur : 90px ;
la taille : 180px ;
rayon de bordure : 12 rem 0 0 12 rem ;
Couleur de l'arrière plan : violet ;
}

Production

Nous avons proposé différentes méthodes pour créer un demi-cercle avec CSS.

Conclusion

Pour créer un demi-cercle, nous pouvons simplement utiliser le CSS ' rayon de bordure ' propriété. Le demi-cercle peut être créé d'un côté à l'autre, par exemple à gauche, à droite, en haut et en bas. Dans la propriété border-radius, la valeur initiale est pour le coin supérieur gauche, la seconde pour le coin supérieur droit, la troisième pour le coin inférieur droit et la quatrième valeur pour le côté inférieur gauche. Cet article a expliqué comment créer un demi-cercle avec CSS.