Maison > interface Web > tutoriel CSS > le corps du texte

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

Linda Hamilton
Libérer: 2024-10-27 02:25:03
original
157 Les gens l'ont consulté

How to Create Perfect Half-Circles in CSS Using a Single 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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!