web-dev-qa-db-fra.com

Demi-cercle avec CSS (bordure, contour uniquement)

J'essaie de créer un cercle avec CSS, qui ressemble exactement à l'image suivante:

enter image description here

... avec un seul div:

<div class="myCircle"></div>

et en utilisant niquement CSS définitions. Pas de SVG, WebGL, DirectX, [...] autorisés.

J'ai essayé de dessiner un cercle complet et d'en atténuer la moitié avec un autre div, et cela fonctionne, mais je cherche une alternative plus élégante.

htmlcsscss-shapes
57
Dyin

Vous pouvez utiliser border-top-left-radius et border-top-right-radius propriétés pour arrondir les coins de la boîte en fonction de la hauteur de la boîte (et des bordures ajoutées).

Ajoutez ensuite une bordure en haut/à droite/à gauche de la boîte pour obtenir l’effet.

Voici:

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    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;
}

WORKING DEMO.

Vous pouvez également ajouter box-sizing: border-box à la boîte afin de calculer la largeur/hauteur de la boîte, y compris les bordures et le rembourrage.

.half-circle {
    width: 200px;
    height: 100px; /* as the 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;
}

MISE À JOUR DEMO. (Démo sans couleur de fond)

78
Hashem Qolami

J'ai eu un problème similaire il n'y a pas longtemps et c'est ainsi que je l'ai résolu

.rotated-half-circle {
  /* Create the circle */
  width: 40px;
  height: 40px;
  border: 10px solid black;
  border-radius: 50%;
  /* Halve the circle */
  border-bottom-color: transparent;
  border-left-color: transparent;
  /* Rotate the circle */
  transform: rotate(-45deg);
}
<div class="rotated-half-circle"></div>
7
mariomc

J'utilise une méthode de pourcentage pour atteindre

        border: 3px solid rgb(1, 1, 1);
        border-top-left-radius: 100% 200%;
        border-top-right-radius: 100% 200%;
3
朱钰鹏