Dessinez un demi-cercle avec CSS et SVG

Je suis à la recherche d'un moyen de tirer la partie inférieure de ce cercle à l'aide de CSS et SVG. J'ai vu cette réponse mais il traite avec un parfait demi-cercle, alors que j'ai besoin d'un coup de segment coupé pour le rendre un peu moins de la moitié. Ce n'est probablement pas possible avec de la pure CSS mais le SVG réponse devient compliqué pour moi de le modifier.

HTML:

<svg class="pie">
  <circle cx="115" cy="115" r="110"></circle>
  <path d="M115,115 L115,5 A110,110 1 0,1 225,115 z"></path>
</svg>

Dessinez un demi-cercle avec CSS et SVG

  • comment à ce sujet? jsfiddle.net/Nbm2t/87
  • oui, cela fonctionne, pouvez vous s'il vous plaît faire une réponse complète pourquoi cela fonctionne? il semble qu'en raison de l' :après, il prend le parent border-radius? Je n'étais pas au courant de cela.
InformationsquelleAutor parliament | 2014-12-29
  1. 6

    Vous pouvez le faire avec du CSS:

    CSS:

    .partial-circle {
  position: relative;
  height: 20px;
  width: 100px;
  overflow: hidden;
}
.partial-circle:before {
  content: '';
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  bottom: 0;
  background: #D08707;
}

    HTML:

    <div class="partial-circle"></div>

    Vous pouvez aussi avoir les deux parties:

    CSS:

    .partial-circle {
  position: relative;
  width: 100px;
  overflow: hidden;
}
.partial-circle:before {
  content: '';
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.partial-circle.top {
  height: 80px;
}
.partial-circle.bottom {
  height: 20px;
}
.partial-circle.top:before {
  top: 0;
  background: #E19B21;
}
.partial-circle.bottom:before {
  bottom: 0;
  background: #D08707;
}

    HTML:

    <div class="partial-circle top"></div>
<div class="partial-circle bottom"></div>

    • je vous remercie pour votre réponse. ceci utilise le même concept que Cattla de la réponse, mais que l'un est beaucoup plus simple. modifier oh je vois le vôtre est pour le haut et le bas
    • J'ai voulu séparer le haut et le bas des pièces. Qui peut demander un peu plus de code (qui pourrait être simplifié en plus de perdre de la clarté), mais en fonction de ce que vous voulez, il peut être plus souple.
    InformationsquelleAutor Oriol
  2. 17

    Pourquoi ne pas utiliser deux path éléments avec un arc de commande?

    HTML:

    <svg width="135" height="135">
  <path d="M125,85 a60,60 0 1,0 -115,0" fill="#E79A16" /><!--Top Half-->
  <path d="M10,85 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>

    Vous pouvez les séparer facilement.

    HTML:

    <svg width="135" height="135">
  <path d="M125,80 a60,60 0 1,0 -115,0" fill="#E79A16" /><!--Top Half-->
</svg>
<svg width="135" height="135">
  <path d="M10,80 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>
<svg width="135" height="135">
  <path d="M10,0 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>

    InformationsquelleAutor Weafs.py