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 doit être créée en utilisant CSS, sans outils ni graphiques externes, s'affichant comme illustré dans la référence image?

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és 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éfinie 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 en 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!