Comment puis-je créer un demi-cercle en utilisant uniquement CSS ?

Créer un demi-cercle en utilisant uniquement CSS

Problème :

Un semi-circulaire peut-il la forme peut-elle être créée à l'aide de CSS, sans outils ni graphiques externes, s'affichant comme illustré dans l'image de référence ?

Solution :

Utiliser Border-Radius et Border :

Pour obtenir cet effet, les propriétés CSS border-top-left-radius et border-top-right-radius peuvent être exploitées pour arrondir les coins d'une boîte en fonction de sa hauteur et des bordures ajoutées. Des bordures sont ensuite appliquées sur les côtés supérieur, droit et gauche de la boîte, complétant la forme du demi-cercle.

Code CSS :

<code class="css">.half-circle {
    width: 200px;
    height: 100px; /* Half of the width */
    background-color: gold;
    border-top-left-radius: 110px;  /* 100px height + 10px border */
    border-top-right-radius: 110px; /* 100px height + 10px border */
    border: 10px solid gray;
    border-bottom: 0;
}</code>

Cette méthode restitue efficacement un demi-cercle en utilisant un seul élément div.

Approche alternative utilisant le dimensionnement de la boîte : border-box :

Une autre option implique la propriété box-sizing , qui peut être défini sur border-box pour prendre en compte les bordures lors du calcul de la largeur et de la hauteur de la boîte.

<code class="css">.half-circle {
    width: 200px;
    height: 100px; /* Half of the width */
    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;
}</code>

Les deux méthodes imitent efficacement une forme de demi-cercle en utilisant uniquement CSS.

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!