Comment créer un semi-cercle avec CSS

CSS vous permet de créer différentes formes telles que des rectangles, des ovales, des cercles, des carrés et plus. Cependant, la forme que l'on trouve principalement dans les applications Web est la forme du cercle; car il est facile à fabriquer et largement utilisé à des fins de conception.

Lors de la conception d'un site Web, l'ajout de demi-cercles au lieu de cercles donne un meilleur look. De plus, la formation de semi-cercles est facile et intéressante.

Dans cet article, nous fournirons un guide sur la façon de créer un demi-cercle à l'aide de CSS.

Comment créer un semi-cercle avec CSS?

Pour faire un demi-cercle, nous utiliserons le «rayon frontalier" propriété. Cette propriété nous aidera à faire un demi-cercle de la manière suivante:

• Semi-cercle du haut
• Semi-cercle du bas
• Semi-cercle de la gauche
• Semi-cercle de la droite

Élaborons chacun par un!

Exemple 1: Créez un semi-cercle à partir du haut avec CSS

Pour créer un demi-cercle à partir du haut, nous allons d'abord spécifier le «”Élément à l'intérieur de la balise corporelle de notre fichier HTML.

Html

Maintenant, définissez les dimensions appropriées pour la div, comme nous attribuerons le «largeur«Valeur de la propriété comme«180px" et "hauteur«Propriété avec valeur»90px". Dans l'étape suivante, définissez le «rayon frontalier" valeur de la propriété "12rem 12rem 0 0» Lorsque 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, le troisième et le quatrième chiffre 0 coupera la partie tout fond du 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;
hauteur: 90px;
Border-Radius: 12rem 12rem 0 0;
Color en 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éez un semi-cercle en bas avec CSS

Pour la formation d'un demi-cercle par le bas, nous définirons les valeurs de propriété Border-Radius comme «0 0 12rem 12rem», Où les deux premières valeurs représentent le radius en haut à gauche et en haut à droite. Nous les avons fixés à 0 pour faire disparaître complètement la moitié supérieure de la div. Pour le bas, nous n'avons taillé qu'un peu en bas à gauche et en bas du côté droit en réglant les valeurs sur 12REM.

CSS

div
Largeur: 180px;
hauteur: 90px;
Border-Radius: 0 0 12rem 12rem;
Color en arrière-plan: violet;

Sortir

Exemple 3: Créez un semi-cercle à partir de droite avec CSS

Pour faire un demi-cercle CSS à droite, ajustez d'abord la hauteur et la largeur du conteneur car il est nécessaire pour obtenir la forme appropriée du cercle. Met le "largeur" comme "90px" et "hauteur" comme "180px" ce temps. Encore une fois, utilisez la propriété Border-Radius avec la valeur "0 12rem 12rem 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 haut à droite et en bas à droite. L'application de ces valeurs formera un demi-cercle à partir de la droite.

CSS

div
Largeur: 90px;
hauteur: 180px;
Border-Radius: 0 12rem 12rem 0;
Color en arrière-plan: violet;

Sortir

Exemple 4: Créez un semi-cercle à partir de gauche avec CSS

Cette fois, spécifiez la propriété Border-Radius le long de la valeur "12rem 0 0 12rem» La première et la dernière valeur 12rem coupera le côté supérieur gauche et en bas à gauche de la div, définir la deuxième et la troisième valeur sur 0, le haut à droite et en bas à droite du cercle. Finalement, notre demi-cercle gauche sera créé.

CSS

div
Largeur: 90px;
hauteur: 180px;
Border-Radius: 12rem 0 0 12rem;
Color en arrière-plan: violet;

Sortir

Nous avons offert 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 frontalier" propriété. Le semi-cercle peut être créé d'un côté à l'autre, comme à gauche, à droite, en haut et en bas. Dans la propriété Border-Radius, la valeur initiale est pour le haut à gauche, la seconde est pour le haut à droite, le troisième est pour le bas à droite, et la quatrième valeur est pour le côté inférieur gauche. Cet article a expliqué comment créer un semi-cercle avec CSS.