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

Solution CSS élégante pour créer des demi-cercles

Le défi de créer un demi-cercle avec CSS en utilisant un seul div et sans externe les bibliothèques peuvent être résolues avec élégance.

Utiliser Border-Radius et Borders

Une approche consiste à utiliser la bordure-haut-gauche-radius et la bordure-haut-droite- propriétés de rayon pour arrondir les coins de la boîte en fonction de sa hauteur. Ceci est combiné avec une bordure sur les côtés supérieur, droit et gauche pour obtenir l'effet demi-cercle.

Code CSS :

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

Alternative avec Box-Sizing

Une autre option consiste à utiliser la propriété box-sizing: border-box pour inclure la bordure et le remplissage dans le calcul de la largeur et de la hauteur de la boîte. Cela permet d'utiliser des valeurs exactes pour le rayon et la bordure dans le CSS.

Code CSS :

<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;

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

Ces approches fournissent une solution élégante et uniquement CSS pour créer des demi-cercles , satisfaisant aux exigences d'utilisation d'un seul div et évitant les bibliothèques supplémentaires.

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!