Comment puis-je créer un demi-cercle à l’aide de bordures et de contours CSS ?

Création d'un demi-cercle avec CSS à l'aide de bordures et de contours

Dans une tentative de construire un demi-cercle dans un seul élément div à l'aide de CSS , on peut rencontrer diverses techniques. Cet article présente une solution raffinée utilisant les propriétés border-top-left-radius et border-top-right-radius pour courburer les coins de la boîte.

Pour obtenir cet effet, ajoutez simplement une bordure en haut, côtés droit et gauche de la boîte, tout en éliminant la bordure en bas. Cette approche crée efficacement un demi-cercle visuellement agréable et élégant.

Par exemple, considérons la définition CSS suivante :

.half-circle {
   width: 200px;
   height: 100px;
   background-color: gold;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   border: 10px solid gray;
   border-bottom: 0;
}

En définissant la hauteur de la boîte à la moitié de sa largeur, avec des valeurs de rayon de bordure appropriées et une bordure appropriée, vous pouvez facilement restituer un demi-cercle continu.

Une approche alternative consiste à utiliser la propriété de dimensionnement de la boîte pour tenir compte de la largeur et de la hauteur de la boîte, y compris bordures et rembourrage. Cette technique élimine le besoin de calculs supplémentaires et garantit la cohérence du résultat final.

.half-circle {
   width: 200px;
   height: 100px;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   border: 10px solid gray;
   border-bottom: 0;

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

Cette approche modifiée offre une flexibilité dans le style et garantit que le demi-cercle souhaité est rendu de manière cohérente dans les différents navigateurs. En tirant parti de la puissance des bordures et des rayons CSS, vous pouvez créer sans effort des éléments semi-circulaires visuellement attrayants et efficaces dans vos conceptions Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!