Comment créer des demi-cercles parfaits en CSS à l'aide d'un seul Div ?

Créer des demi-cercles avec CSS

Créer des formes circulaires en CSS peut poser un défi. Si vous recherchez une solution élégante pour générer des formes parfaites en demi-cercle en utilisant un seul div et des définitions CSS, voici ce que vous devez savoir :

Le mélange parfait : bordure-rayon et bordures

Pour obtenir l'effet demi-cercle souhaité, nous exploitons les propriétés border-top-left-radius et border-top-right-radius. Ces propriétés arrondissent les coins de notre boîte cible en fonction de sa hauteur et des bordures ajoutées.

Implémentation CSS

Considérez le code CSS suivant :

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

Comment ça marche

Les propriétés border-top-left-radius et border-top-right-radius garantissent que les coins supérieurs de la boîte cible sont arrondis. En définissant ces valeurs sur la somme de la hauteur de la boîte et de l'épaisseur de la bordure (10 px), nous créons des courbes qui se connectent de manière transparente aux lignes droites des bordures gauche et droite.

Approche alternative : Boîte- Dimensionnement

Alternativement, nous pouvons utiliser la propriété box-sizing pour inclure les bordures et le remplissage dans le 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;

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

Conclusion

Grâce à ces techniques CSS, vous pouvez désormais créer sans effort des formes élégantes en demi-cercle qui rehaussent l'attrait visuel de 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!