Comment créer un demi-cercle avec CSS en utilisant un seul Div ?

Créer un demi-cercle avec CSS

Question :

Comment créer un demi-cercle en utilisant uniquement CSS, avec un seul élément div et sans recourir à des outils externes comme SVG ou des API graphiques ?

Réponse :

Obtenir un effet demi-cercle avec CSS peut être obtenu en tirant parti propriétés de frontière. Pour ce faire :

1. Utilisez border-top-left-radius et border-top-right-radius pour arrondir les coins de la boîte en fonction de sa hauteur et des bordures ajoutées. Par exemple :

border-top-left-radius: 110px;  // Height + Border
border-top-right-radius: 110px; // Height + Border

2. Ajoutez des bordures en haut, à droite et à gauche de la boîte. Réglez border-bottom sur zéro pour supprimer la bordure inférieure.

border: 10px solid gray;
border-bottom: 0;

Cette combinaison de coins et de bordures arrondis crée une forme de demi-cercle.

Exemple :

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

Méthode alternative :

Une approche alternative consiste à utiliser box-sizing : border-box, qui calcule la largeur et la hauteur de la boîte y compris les bordures et le remplissage. De cette façon, vous pouvez spécifier la hauteur exactement comme la moitié de la largeur :

<code class="css">.half-circle {
    width: 200px;
    height: 100px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;

    box-sizing: border-box;
}</code>

Les deux méthodes peuvent obtenir l'effet de demi-cercle souhaité en utilisant des techniques purement 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!