web-dev-qa-db-fra.com

Comment dessiner un secteur de cercle en CSS?

Bien, dessiner un cercle avec du CSS pur est facile.

.circle {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 3px solid black;
    background-color: green;
}

Comment dessiner un secteur? Étant donné un degré X [0-360] Je veux dessiner un secteur de X degrés. Puis-je faire cela avec du CSS pur?

Par exemple:

enter image description here

Merci + Exemple

Merci Jonathan, j'ai utilisé la première méthode. Si cela peut aider quelqu'un, voici un exemple de fonction JQuery qui obtient un pourcentage et dessine un secteur. Le secteur est derrière le cercle de pourcentage et cet exemple montre comment réaliser un arc de cercle à partir d'un degré de départ.

$(function drawSector() {
  var activeBorder = $("#activeBorder");
  var prec = activeBorder.children().children().text();
  if (prec > 100)
    prec = 100;
  var deg = prec * 3.6;
  if (deg <= 180) {
    activeBorder.css('background-image', 'linear-gradient(' + (90 + deg) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
  } else {
    activeBorder.css('background-image', 'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
  }

  var startDeg = $("#startDeg").attr("class");
  activeBorder.css('transform', 'rotate(' + startDeg + 'deg)');
  $("#circle").css('transform', 'rotate(' + (-startDeg) + 'deg)');
});
.container {
  width: 110px;
  height: 110px;
  margin: 100px auto;
}

.prec {
  top: 30px;
  position: relative;
  font-size: 30px;
}

.prec:after {
  content: '%';
}

.circle {
  position: relative;
  top: 5px;
  left: 5px;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #E6F4F7;
}

.active-border {
  position: relative;
  text-align: center;
  width: 110px;
  height: 110px;
  border-radius: 100%;
  background-color: #39B4CC;
  background-image: linear-gradient(91deg, transparent 50%, #A2ECFB 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<div class="container">
  <div id="activeBorder" class="active-border">
    <div id="circle" class="circle">
      <span class="prec">66</span>
      <span id="startDeg" class="90"></span>
    </div>
  </div>
</div>

démo de JSFiddle

$(function drawSector() {
    // Get degrees
    ...
    // Draw a sector
    if (deg <= 180) {
        activeBorder.css('background-image', 'linear-gradient(' + (90+deg) + 'deg, transparent 50%, #A2ECFB 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
    }
    else {
        activeBorder.css('background-image', 'linear-gradient(' + (deg-90) + 'deg, transparent 50%, #39B4CC 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
    }

    // Rotate to meet the start degree
    activeBorder.css('transform','rotate(' + startDeg + 'deg)');
});
csscss3css-shapes
68
Itay Gal

CSS et dégradés d'arrière-plan multiples

Plutôt que d'essayer de dessiner la partie verte, vous pouvez dessiner les parties blanches:

pie {
    border-radius: 50%;
    background-color: green;
}

.ten {
    background-image:
        /* 10% = 126deg = 90 + ( 360 * .1 ) */
        linear-gradient(126deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

pie {
  width: 5em;
  height: 5em;
  display: block;
  border-radius: 50%;
  background-color: green;
  border: 2px solid green;
  float: left;
  margin: 1em;
}

.ten {
  background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.twentyfive {
  background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.fifty {
  background-image: linear-gradient(90deg, white 50%, transparent 50%);
}


/* Slices greater than 50% require first gradient
   to be transparent -> green */

.seventyfive {
  background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.onehundred {
  background-image: none;
}
<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

Démo: http://jsfiddle.net/jonathansampson/7PtEm/

enter image description here

Image Vectorielle

Si c'est une option, vous pouvez obtenir un effet similaire en utilisant SVG <circle> et <path> éléments. Considérer ce qui suit:

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

Ce qui précède est assez simple. Nous avons un élément contenant un cercle et un chemin. Le centre du cercle est à 115x115 (faisant de l'élément SVG 230x230). Le cercle a un rayon de 110, ce qui lui donne une largeur totale de 220 (laissant une bordure de 10).

Nous ajoutons ensuite un <path> _ élément, qui est la partie la plus compliquée de cet exemple. Cet élément a un attribut qui détermine où et comment le chemin est tracé. Cela commence par la valeur suivante:

M115,115

Ceci indique au chemin de commencer au centre du cercle susmentionné. Ensuite, nous traçons une ligne de cet emplacement à l'emplacement suivant:

L115,5

Cela trace une ligne verticale du centre du cercle jusqu'au sommet de l'élément (ainsi, cinq pixels du haut). C’est à ce stade que les choses se compliquent un peu, mais restent très intelligibles.

Nous dessinons maintenant un arc de notre emplacement actuel (115,5):

A110,110 1 0,1 190,35 z

Cela crée notre arc et lui donne un rayon correspondant à celui de notre cercle (110). Les deux valeurs représentent le rayon x et le rayon y, et les deux sont égales puisqu'il s'agit d'un cercle. La prochaine série de chiffres importants est la dernière, 190,35. Cela indique à l'arc où compléter.

Pour le reste de l’information (1 0,1 et z) ils contrôlent la courbure, la direction et la borne de l'arc lui-même. Vous pouvez en apprendre plus à leur sujet en consultant n’importe quelle référence de chemin SVG en ligne.

Pour réaliser une "tranche" de taille différente, il suffit de changer le 190,35 pour refléter un ensemble de coordonnées plus grand ou plus petit. Vous constaterez peut-être que vous devrez créer un deuxième arc si vous souhaitez couvrir plus de 180 degrés.

Si vous souhaitez déterminer les coordonnées x et y sous un angle, vous pouvez utiliser les équations suivantes:

x = cx + r * cos(a)
y = cy + r * sin(a)

Avec l'exemple ci-dessus, un degré de 76 serait:

x = 115 + 110 * cos(76)
y = 115 + 110 * sin(76)

Ce qui nous donne 205.676,177.272.

Avec une certaine facilité, vous pouvez créer les éléments suivants:

circle {
  fill: #f1f1f1;
  stroke: green;
  stroke-width: 5;
}

path {
  fill: green;
}

svg.pie {
  width: 230px;
  height: 230px;
}
<svg class="pie">
  <circle cx="115" cy="115" r="110"></circle>
  <path d="M115,115 L115,5 A110,110 1 0,1 190,35 z"></path>
</svg>

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

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

Démo: http://jsfiddle.net/jonathansampson/tYaVW/

enter image description here

152
Sampson

C’est très bien possible d’utiliser les propriétés overflow et transform sans qu’il soit nécessaire de faire des calculs complexes.

> Transformer la transformation

Pour les angles inférieurs à 180 degrés

  1. Ajouter un élément avec les proportions 2: 1 et overflow: hidden;

  2. Ajoutez un pseudo-élément avec des rayons de bordure supérieurs identiques à la hauteur de l'élément et des rayons inférieurs à 0.

  3. Put transform-Origin: 50% 100%; Ceci transforme le pseudo-élément à partir de son centre.

  4. Transformer: faire pivoter (); le pseudo élément par addition de l'angle requis,
    c'est-à-dire ., transform: rotate(180 - rqrd. angle);

Regarde comment ça marche :

enter image description here

EG:
Un secteur de 40 degrés utilisant cette méthode: Violon

div {
  ...
  overflow: hidden;
  ...
}
div:before {
  ...
  border-radius: 100px 100px 0 0;
  transform-Origin: 50% 100%;
  transform: rotate(140deg);
  ...
}

div {
  height: 100px;
  width: 200px;
  overflow: hidden;
  position: relative;
}
div:before {
  height: inherit;
  width: inherit;
  position: absolute;
  content: "";
  border-radius: 100px 100px 0 0;
  background-color: crimson;
  -webkit-transform-Origin: 50% 100%;
  -moz-transform-Origin: 50% 100%;
  -ms-transform-Origin: 50% 100%;
  transform-Origin: 50% 100%;
  -webkit-transform: rotate(140deg);
  -moz-transform: rotate(140deg);
  -ms-transform: rotate(140deg);
  transform: rotate(140deg);
}
<div></div>

> Transformer l'inclinaison

Vous pouvez aussi mettre une image à l'intérieur du secteur!

Ceci peut être fait en utilisant skew transforme sur le parent et -ve skew sur le pseudoélément:
Violon

div {
    ...
    overflow: hidden;
    transform-Origin: 0% 100%;
    transform: skew(-50deg);  /*Complement of rqrd angle*/
    ...
}
div:before {
    ...
    transform-Origin: 0% 100%;
    transform: skew(50deg);
    ...
}

Voyez comment cela fonctionne:

enter image description here

div {
  height: 200px;
  width: 200px;
  overflow: hidden;
  -webkit-transform-Origin: 0% 100%;
  -moz-transform-Origin: 0% 100%;
  -ms-transform-Origin: 0% 100%;
  transform-Origin: 0% 100%;
  -webkit-transform: skew(-50deg);
  -moz-transform: skew(-50deg);
  -ms-transform: skew(-50deg);
  transform: skew(-50deg); /*Complement of rqrd angle or (90 - angle)*/
  position: relative;
}
div:before {
  height: inherit;
  width: inherit;
  position: absolute;
  content: "";
  border-radius: 0 200px 0 0;
  background: url('http://www.placekitten.com/g/300/200/');
  -webkit-transform-Origin: 0% 100%;
  -moz-transform-Origin: 0% 100%;
  -ms-transform-Origin: 0% 100%;
  transform-Origin: 0% 100%;
  -webkit-transform: skew(50deg);
  -moz-transform: skew(50deg);
  -ms-transform: skew(50deg);
  transform: skew(50deg);
}
<div></div>

Remerciements : Je ne veux pas être un voleur de soi, j'ai utilisé les idées que j'avais précédemment utilisées ici et - ici .

31
The Pragmatick

Est-ce que cela aide?

.circle {
  width: 16em;
  height: 16em;
  border-radius: 50%;
  background: linear-gradient(36deg, #272b66 42.34%, transparent 42.34%) 0 0;
  background-repeat: no-repeat;
  background-size: 50% 50%;
}
<div class="circle"></div>

Violon de travail

En fait, certains calculs de géométrie sont nécessaires ici. Mais laissez-moi expliquer cela en bref:

En considérant les 4 quarts du cercle, l’angle du gradient linéaire peut être calculé à chaque quart. Et le background-position détermine le quartier:

Q I   =>  100% 0
Q II  =>  100% 100%
Q III =>  0    100%
Q IV  =>  0    0

La seule chose qui reste est d'où vient le color-stop utilisé:

Considérez un segment de cercle à 30 angles au premier trimestre .

En tant que talentueuse , Ana Tudor a expliqué en elle excellent article, Si nous prenons la longueur de la largeur du carré à a, alors la longueur de la demi-diagonale sera de a*sqrt(2)/2.

Si nous considérons que le degré de gradient est g la différence entre deux angles de dégradé et diagonal est égale à d, alors la longueur de color-stop peut être calculée comme suit:

a*sin(g) / (a*sqrt(2)/2 * cos(d))
= sin(g) / (sqrt(2)  /2 * cos(d))

Donc, dans ce cas, nous avons sin(30deg) / (sqrt(2)*cos((45-30)deg)) = 0.3660, et la valeur% pour l’arrêt de la couleur est 36.60%

Puisque notre forme est au 1er trimestre, le background-position est 100% 0.

et le linéaire-gradient serait comme ceci:

linear-gradient(-30deg, orange 36.60%, transparent 36.60%) 100% 0;

.circle {
  width: 16em;
  height: 16em;
  border-radius: 50%;
  background: linear-gradient(-30deg, orange 36.60%, transparent 36.60%) 100% 0;
  background-repeat: no-repeat;
  background-size: 50% 50%;
}
<div class="circle"></div>

Je recommande de lire l'article de Ana pour plus de détails.

17
Hashem Qolami

comme je n’ai trouvé aucune réponse satisfaisante, je me suis mis à genoux, en utilisant la fonction clip-path et tout un dimanche de css pour obtenir enfin ce que je voulais.

vous pouvez choisir un angle de début et de fin, puis l'élément dessine bien, rien d'autre. vous n'aurez besoin que de la solution bord-rayon pour tracer le cercle de base.

my solutions fonctionne avec une grille de quatre polygones, chacun fournissant un point de départ ou d’arrivée possible pour les valeurs 0-90 ° resp. 0-100%, 90-180 ° resp. 0-100% et ainsi de suite, partageant le point central et donc, il y a deux fois 4 segments. vous pouvez imaginer la mécanique comme une tige de télescope à plusieurs segments, chacun effectuant son travail segmenté de 0 à N. En raison de la mécanique, tout en maintenant une certaine clarté du code (0-90,90-180 ..), i a dû tourner manuellement (-45deg) le div, de sorte que 0 ° = 12 ''.

voici un petit croquis qui peut illustrer comment je l’ai fait:

schema

veuillez noter que vous ne pouvez pas l'utiliser à des fins commerciales, car je n'ai trouvé aucune solution de ce type en ligne. Il doit donc y avoir une certaine valeur. veuillez respecter ceci.


tracer des segments de cercle avec css von c. Commencez par créer une licence Creative Commons dans la base de données - Pas de commentaire sur la disponibilité - Cliquez ici pour en savoir plus. 4.0 International Lizenz.

            <script src="http://code.jquery.com/jquery-latest.js"></script>

<style type="text/css">
    .circle{
        position: absolute;
        top: 100px;

        width: 600px;
        height: 600px;
        border-radius: 50%;
        background-color: #FFFF00;
        opacity: .9;

        -webkit-transform: rotate(45deg);

}

<script type="text/javaScript">

    var obj;
    var start, end;
    function rangeStart(val) {
        obj =  $("body").find(".circle");
        start = val;
        setAngle(obj, start, end);
    }

    function rangeEnd(val) {
        obj =  $("body").find(".circle");
        end = val;
        setAngle(obj, start, end);
    }

    function applyMasking(obj) {
        obj.css("-webkit-clip-path", ptsToString());
    }

    // not working for degree start to be lower than end, hence, we set the interface to automatically adapt to that exception:
    /*
    function checkForRangeExceptions() {
        if(end < start) {
            $("body").find("input[name='rangeLower']").val($("body").find("input[name='rangeUpper']").val());
            $("body").find("input[name='rangeLower']").slider('refresh');
        }
    }
    */

    // setInterval(doit, 200);

    var angie = 0;
    function doit() {
        obj =  $("body").find(".circle");
        if(angie < 360)
            angie+=15;
        else angie = 0;
        setAngle(obj, 0, angie);
    }


    function ptsToString() {
        var str = "";
        str+="polygon(";
        for(var i=0; i < pts.length; i++) {
            str+=pts[i].x+"% ";
            if(i != pts.length-1)
                str+=pts[i].y+"% ,";
            else str+=pts[i].y+"%";
        }
        str+=")";
        return str;
    }

    /*
    gets passed an html element and sets its clip-path according to the passed angle,
    starting at 0°; note that from a clock perspective, we start at +45° and hence have 
    to add that value to passed angles later on:
    */
    var pts = 
    [
     {x: 50, y: 50}, {x: 0, y: 0}, {x: 0, y: 0},
     {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0},
     {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}
    ];
    var lb, ub;
    var sa, ea;
    function setAngle(obj, start, end) {
        // if no start, set 0° as default:
        start = (start == undefined ? start = 0 : start);

        // find out upper and lower sector bounds: 
        lb = (angleToSector(start) * 2) - 1;
        ub = angleToSector(end) * 2;

        // find start end end angles:
        sa = mapAngleToPoint(start);
        ea = mapAngleToPoint(end); 

        // now set points except start point which is 0:
        for(var i=1; i < pts.length; i++) {

            // set all below lb to lb:
            if(i <= lb) { pts[i].x = sa.x; pts[i].y = sa.y; }

            // set all in between to max values:
            else if(i > lb && i < ub) {
                pts[i] = setMax(i);
            }

            // set all above ub to ub:
            else if(i >= ub) { pts[i].x = ea.x; pts[i].y = ea.y; }

        }

        // apply masking:
        applyMasking(obj);

    }

    // assuming that 100 need to map 90°:
    function angleToPerc(angle) {
        return angle * (100/90);
    }

    function lowerBound(angle) {
        return (mapAngleToSector(angle));
    }

    function uppperBound(angle){
        return (mapAngleToSector(angle));           
    }

    // sectors 1-4
    function angleToSector(angle) {
            if      (angle >= 0   && angle < 90)  return 1;
            else if (angle >= 90  && angle < 180) return 2;
            else if (angle >= 180 && angle < 270) return 3;
            else if (angle >= 270 && angle <= 360) return 4;
    }

    // this maps the passed angle to a coordinate value:
    var as;
    function mapAngleToPoint(angle) {
            var pt = {x: 0, y: 0};
            as = angleToSector(angle);
            if(as == 1)       {pt.x = angleToPerc(angle); pt.y = 0; }
            else if(as == 2)  {pt.x = 100; pt.y = angleToPerc(angle-90)}
            else if(as == 3)  {pt.x = 100-angleToPerc(angle-180); pt.y = 100; }
            else if(as == 4)  {pt.x = 0; pt.y = 100-angleToPerc(angle-270); }
            return pt;
    }

    // set a point to its max by index:
    function setMax(index) {
        var pt = {x: 0, y: 0};
        if      (index == 1 || index == 2) { pt.x = 100; pt.y = 0; }
        else if (index == 3 || index == 4) { pt.x = 100; pt.y = 100; }
        else if (index == 5 || index == 6) { pt.x = 0; pt.y = 100; }
        else if (index == 7 || index == 8) { pt.x = 0; pt.y = 0; }
        return pt;
    }

</script>

</head>

<body>

    <div class="circle">

    </div>

    <input type="range" name="rangeLower" value="0" min="0" max="360" onchange="rangeStart(this.value);">
    <input type="range" name="rangeUpper" value="66"min="0" max="360" onchange="rangeEnd(this.value);">


</body>
8
c. schaefer
  1. Votre besoin de dessiner un cercle
  2. utilisation clip-path couper un secteur (vous devez faire des calculs)

vous pouvez jouer avec clip-pathici

voici une démo:

#skills {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 30px auto;
}

.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
}

.animate {
  -webkit-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
  -moz-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
  -o-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
  transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
}

.animate:hover {
  transform: scale(1.1);
  transform-Origin: center center;
}

#part1 {
  background-color: #E64C65;
  -webkit-clip-path: polygon(50% 0, 50% 50%, 100% 41.2%, 100% 0);
  clip-path: polygon(50% 0, 50% 50%, 100% 41.2%, 100% 0);
}

#part2 {
  background-color: #11A8AB;
  -webkit-clip-path: polygon(50% 50%, 100% 41.2%, 100% 100%, 63.4% 100%);
  clip-path: polygon(50% 50%, 100% 41.2%, 100% 100%, 63.4% 100%);
}

#part3 {
  background-color: #4FC4F6;
  -webkit-clip-path: polygon(50% 50%, 36.6% 100%, 63.4% 100%);
  clip-path: polygon(50% 50%, 36.6% 100%, 63.4% 100%);
}

#part4 {
  background-color: #FFED0D;
  -webkit-clip-path: polygon(50% 50%, 0 100%, 36.6% 100%);
  clip-path: polygon(50% 50%, 0 100%, 36.6% 100%);
}

#part5 {
  background-color: #F46FDA;
  -webkit-clip-path: polygon(50% 50%, 0 36.6%, 0 100%);
  clip-path: polygon(50% 50%, 0 36.6%, 0 100%);
}

#part6 {
  background-color: #15BFCC;
  -webkit-clip-path: polygon(50% 50%, 0 36.6%, 0 0, 50% 0);
  clip-path: polygon(50% 50%, 0 36.6%, 0 0, 50% 0);
}
<div id="skills">
  <div id="part1" class="circle animate"></div>
  <div id="part2" class="circle animate"></div>
  <div id="part3" class="circle animate"></div>
  <div id="part4" class="circle animate"></div>
  <div id="part5" class="circle animate"></div>
  <div id="part6" class="circle animate"></div>
</div>
7
Gavin

J'ai une autre solution.

#pie {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #76dd76;
  border-radius: 50%;
  border: 1px solid #76dd76;
}

#pie:before,
#pie:after {
  position: absolute;
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  -webkit-transform-Origin: right bottom;
  -moz-transform-Origin: right bottom;
  -ms-transform-Origin: right bottom;
  transform-Origin: right bottom;
  background-color: white;
  border-top-left-radius: 100%;
}

#pie:after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<div id="pie"></div>

DEMO: http://jsfiddle.net/F6qz9/

7
Nolan

Voir ceci pour avoir une idée de la façon de résoudre votre problème.

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

.circle{
    width: 100px;
    height: 100px;
    background-color: green;
    border-radius: 100px;
    position: relative;
}

.circle:before,
.circle:after {
    border: 50px solid white;
    border-color: transparent transparent white white;
    border-radius: 100px;
    content: '';
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    /* this is to have it white from 180 to 360 degrees on the left side */
    transform:rotate(45deg);
    -ms-transform:rotate(45deg); /* IE 9 */
    -webkit-transform:rotate(45deg); /* Safari and Chrome */
}

/* the green sector is now 180 minus 45 plus 0 degree */
.circle:after {
    transform:rotate(0deg);
    -ms-transform:rotate(0deg); /* IE 9 */
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
}

/* the green sector is now 180 minus 45 plus -75 degree */
/*.circle:after {
    transform:rotate(-75deg);
    -ms-transform:rotate(-75deg);
    -webkit-transform:rotate(-75deg);
}*/

démo

5
MichaB

Toutes les réponses ici sont créatives. C'est incroyable de voir comment les gens résolvent le même problème à bien des égards. La réponse acceptée par Sampson est vraiment cool, mais je ne sais pas pourquoi il a décidé de dessiner la partie blanche au lieu du vert. J'ai donc pensé à partager une version modifiée qui dessine réellement le vert. Je le trouve juste un peu plus simple de cette façon, donc je le partage au cas où d’autres le trouveraient utile aussi.

pie {
    width: 5em;
    height: 5em;
    display: block;
    border-radius: 50%;
    border: 2px solid green;
    float: left;
    margin: 1em;
}

.ten {
    background-image:
      linear-gradient(-54deg, white 50%, transparent 50%),
      linear-gradient(-90deg, green 50%, transparent 50%);
}

.twentyfive {
    background-image:
      linear-gradient(0deg, white 50%, transparent 50%),
      linear-gradient(-90deg, green 50%, transparent 50%);
}

.fifty {
    background-image:
      linear-gradient(-90deg, green 50%, transparent 50%);
}

/* Slices greater than 50% require first gradient to be green -> transparent */

.seventyfive {
    background-image:
      linear-gradient(0deg, green 50%, transparent 50%),
      linear-gradient(-90deg, green 50%, transparent 50%);
}

.onehundred {
    background-color: green;
}
<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>
5
Racil Hilan

Comme j'avais besoin de cela dynamiquement, voici un petit plugin jQuery. par exemple. appelez $('selector').pieChart(0.4, 'white' 'green') pour afficher un segment vert à 40% sur un cercle blanc.

// LIBRARY FUNCTION
$.fn.pieChart = function(proportion, bg, fg) {
  var angle, grads;
  angle = Math.round(360 * (proportion % 0.5) - 90);
  grads = [
    "linear-gradient(" + angle + "deg, " + (proportion < 0.5 ? bg : fg) + " 50%, transparent 50% )",
    "linear-gradient(-90deg, " + fg + " 50%, transparent 50%)"
  ];
  return $(this).css({
    'background-color': proportion==1 ? fg : bg,
    'background-image': grads.join(','),
    'border': '1px solid '+fg
  });
};

// DEMO
for (var i=0; i <= 10; i++) {
  $('<div class="pie" />').appendTo('body').pieChart(i/10, 'white', 'green');
}
.pie {
  display: inline-block;
  margin: 10px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

Ceci est basé sur celui de Racil exemple ici . (Remarque: je ne pouvais pas utiliser le plug-in OP dans la réponse modifiée car cela ne fonctionne pas pour les secteurs couvrant plus de 180 degrés.)

4
mahemoff

Vous pouvez utiliser un cercle avec une ligne en pointillé.

<svg viewBox="-8 -8 16 16">
  <circle
    cx="0"
    cy="0"
    r="4"
    transform="rotate(270)"
    stroke-width="8"
    stroke-dasharray="4, 26"
    stroke="green"
    fill="none"
  />
</svg>
  • Faites la ligne deux fois plus épaisse que le rayon du cercle, de sorte qu'il atteigne le centre du cercle.
  • Joue avec le stroke-dasharray valeur pour déterminer la taille de la tarte à afficher.

Bonus: L’avantage d’utiliser un cercle au lieu d’un chemin est que vous pouvez facilement l’animer lorsque vous modifiez la taille du graphique: Ajoutez simplement quelque chose comme transition: stroke-dasharray .5s; au css du cercle.

3
Karine Larouche

J'ai une approche légèrement différente et qui peut être animée facilement sans utiliser SVG.

Il utilise des largeurs, des hauteurs et des largeurs de bord très spécifiques, ainsi que des clipsages rectangulaires; vous devez donc les manipuler avec précaution lorsque vous devez modifier les dimensions. Le point le plus important à noter ici est que si vous voulez redimensionner la tarte, vous devez mettre à jour toutes la em valeurs [~ # ~] proportionnellement [~ # ~] - signifiant qu'elles doivent toutes être mises à l'échelle par le même facteur.

Notez qu'un demi-cercle complet doit être ajouté si le camembert est rempli à plus de 50% (> 180 degrés est coloré). Cette partie doit être gérée dynamiquement dans JS si vous l’animez.

<style>
.timer {
    position: relative;
    width: 4em;
    height: 4em;
    float: left;
    margin: 1px 30px 0 0;
}


.timer > #slice {
    position: absolute;
    width: 4em;
    height: 4em;
    clip: rect(0px, 4em, 4em, 2em);
}

.timer > #slice.gt50 {
    clip: rect(auto, auto, auto, auto);
}

.timer > #slice > .pie {
    border: 3.2em solid green;
    position: absolute;
    width: 3.8em;
    height: 3.8em;
    clip: rect(0em, 2em, 4em, 0em);
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
}

.timer > #slice > .pie.fill {
    -moz-transform: rotate(180deg) !important;
    -webkit-transform: rotate(180deg) !important;
    -o-transform: rotate(180deg) !important;
    transform: rotate(180deg) !important;
}

.timer.fill > #slice > .pie {
    border: transparent;
    background-color: green;
    width: 4em;
    height: 4em;
}
</style>    
<div class="timer fill">
</div>
<script>
const PIE_INTERVAL_TIME = 1000; // one second interval time
const PERCENT_INTERVAL = 1.67; // 100 / 60 seconds
const stopInterval = setInterval(pieInterval(), PIE_INTERVAL_TIME);

function pieInterval() {
    let percent = 0;
    return function() {
        percent += PERCENT_INTERVAL;
            const timer = $('.timer');
            const gt50 = percent > 50 ? 'gt50' : '';
            const pieFill = percent > 50 ? '<div class="pie fill"></div>' : '';
      let deg = (360/100) * percent;
      timer.html(
        `<div id="slice" class="${gt50}">
            <div class="pie"></div>
            ${pieFill}
        </div>`);

      if (percent >= 100) {
        deg = 360;
        clearInterval(stopInterval);
      }

      $('#slice').find('.pie').css({
        '-moz-transform':'rotate('+deg+'deg)',
        '-webkit-transform':'rotate('+deg+'deg)',
        '-o-transform':'rotate('+deg+'deg)',
        'transform':'rotate('+deg+'deg)'
       });
    };
}
</script>

Voici le violon à démontrer - ce qui est beaucoup plus simple que d'expliquer par écrit:

Démo animée JSFiddle

2
Alex

Simple. Suivez simplement le code ci-dessous:

Le HTML:

<div class="circle"></div>
<div class="pie"></div>

Le CSS:

.circle {
width: 11em;
height: 11em;
border-radius: 100%;
background: linear-gradient(360deg, #FFFFFF 100%, transparent 42.34%) 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
}

.pie {
width: 11em;
height: 11em;
border-radius: 100%;
background: linear-gradient(-80deg, #1BB90D 50%, transparent 40%) 0 0;
background-repeat: no-repeat;
background-size: 100% 55%;
position: relative;
margin-top: -176px;
border: 1px solid #808D1E;
}
1
Rajnish