Css

Comment dessiner un secteur de cercle en CSS ?

How Draw Circle Sector Css



Solution:

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

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

tarte { border-radius : 50 % ; couleur de fond : vert ; } .ten { background-image: /* 10% = 126deg = 90 + ( 360 * .1 ) */ linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%); }
tarte { largeur: 5em; hauteur: 5em; bloc de visualisation; rayon de bordure : 50 % ; couleur de fond : vert ; bordure : 2px vert uni ; flotteur : gauche ; marge : 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%); } /* Les tranches supérieures à 50% nécessitent que le premier dégradé soit transparent -> vert */ .seventyfive { background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50% , transparent 50%); } .onehundred { background-image: none; }
  

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



entrez la description de l



Image Vectorielle

Si c'est une option, vous pouvez obtenir un effet similaire en utilisant SVGetéléments. Considérer ce qui suit:



  

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 (ce qui rend l'élément SVG 230x230). Le cercle a un rayon de 110, ce qui en fait un total de 220 de large (laissant une bordure de 10).

On ajoute alors uné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é. Il commence par la valeur suivante :

M115,115

Cela 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 dessine une ligne verticale du centre du cercle jusqu'au sommet de l'élément (enfin, à cinq pixels du haut). C'est à ce stade que les choses deviennent un peu plus compliquées mais toujours très intelligibles.

Nous dessinons maintenant un arc à partir 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 égaux puisque nous avons affaire à un cercle. La prochaine série de nombres importants est la dernière,190,35. Cela indique à l'arc où se terminer.

Quant au reste des informations (1 0,1 etz) ceux-ci contrôlent la courbure, la direction et la terminaison de l'arc lui-même. Vous pouvez en savoir 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 le190,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 donne205 676 177 272.

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

cercle { remplir : #f1f1f1 ; trait : vert ; largeur de trait : 5 ; } chemin { remplissage : vert ; } svg.pie { largeur: 230px; hauteur : 230px ; }
  

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

entrez la description de l


C'est tout à fait possible en utilisantdébordement ettransformer les propriétés sans avoir besoin de faire des calculs complexes.

> Faire pivoter la transformation

Pour les angles inférieurs à 180deg

  1. Ajouter un élément avec rapport hauteur/largeur 2:1 etdébordement caché;

  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 égaux à 0.

  3. Mettreorigine de transformation : 50 % 100 % ; Cela transforme le pseudo-élément à partir de son bas milieu.

  4. Transformer : rotation(); le pseudo élément par complément de l'angle recherché,
    c'est à dire .,transformer : rotation (180 - angle rqrd.) ;

Regarde comment ça marche :

entrez la description de l

PAR EXEMPLE :
Un secteur à 40 degrés utilisant cette méthode : Violon

div { ... débordement : caché ; ... } div:before { ... border-radius: 100px 100px 0 0; origine de transformation : 50 % 100 % ; transformation : rotation (140 degrés); ... }
div { hauteur : 100 px ; largeur : 200px ; débordement caché; position : relative ; } div:before { height: inherit; largeur : hériter ; position : absolue ; teneur: ''; rayon de bordure : 100px 100px 0 0 ; couleur de fond : cramoisi ; -webkit-transform-origine : 50 % 100 % ; -origine-moz-transform : 50 % 100 % ; -ms-transform-origin : 50 % 100 % ; origine de transformation : 50 % 100 % ; -webkit-transform : rotation (140 degrés); -moz-transform : rotation (140 degrés); -ms-transform : rotation (140 degrés); transformation : rotation (140 degrés); }
  

> Transformation oblique

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

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

div { ... débordement : caché ; origine de transformation : 0 % 100 % ; transformer : incliner (-50 deg); /*Complément de l'angle rqrd*/ ... } div:before { ... transform-origin: 0% 100%; transformer : incliner (50 deg); ... }

Voyez comment cela fonctionne :

entrez la description de l

div { hauteur : 200px ; largeur : 200px ; débordement caché; -webkit-transform-origine : 0% 100% ; -moz-transform-origin: 0% 100%; -ms-transform-origin : 0 % 100 % ; origine de transformation : 0 % 100 % ; -webkit-transform : skew (-50deg); -moz-transform : skew(-50deg); -ms-transform : skew(-50deg); transformer : incliner (-50 deg); /*Complément de l'angle rqrd ou (90 - angle)*/ position : relative; } div:before { height: inherit; largeur : hériter ; position : absolue ; teneur: ''; rayon de bordure : 0 200px 0 0 ; arrière-plan : url('http://www.placekitten.com/g/300/200/'); -webkit-transform-origine : 0% 100% ; -moz-transform-origin: 0% 100%; -ms-transform-origin : 0 % 100 % ; origine de transformation : 0 % 100 % ; -webkit-transform: skew (50deg); -moz-transform : skew (50deg); -ms-transform : skew (50deg); transformer : incliner (50 deg); }
  

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


est-ce que cela aide?

.circle { largeur: 16em; hauteur : 16em ; rayon de bordure : 50 % ; arrière-plan : dégradé linéaire (36 deg, #272b66 42,34 %, transparent 42,34 %) 0 0 ; background-repeat : pas de répétition ; taille de l'arrière-plan : 50 % 50 % ; }
  

Violon de travail

En fait, un calcul de géométrie est nécessaire ici. Mais laissez-moi vous expliquer cela en bref:

Considérant les 4 quarts du cercle, l'angle de gradient linéaire peut être calculé dans chaque quart. Et lebackground-position détermine le trimestre :

Q = 1> 0 Q 2 = 100%> 100% 100% Q = 3> 0 100% Q 4 => 0 0

La seule chose qui reste est où l'utilisé arrêt de couleur vient de :

Considérez un 30 angles morceau de cercle dans le 1er trimestre .

Aussi talentueux Ana Tudor a expliqué en elle excellent article , Si nous prenons la longueur de la largeur du carré commea, alors la longueur de la demi-diagonale va êtrea*sqrt(2)/2.

Si nous considérons que le degré de gradient estg la différence entre deux angles de pente et de diagonale àd alors la longueur del'arrêt de la couleur peut être calculé par :

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

Donc, dans ce cas, nous avonssin(30deg) / (sqrt(2)*cos((45-30)deg)) = 0,3660, et la valeur % pour l'arrêt de couleur est36,60 %

Puisque notre forme est au 1er trimestre, lebackground-position est100% 0.

et le gradient linéaire serait comme ça :

gradient linéaire (-30deg, orange 36,60 %, transparent 36,60 %) 100 % 0 ;
.circle { largeur: 16em; hauteur : 16em ; rayon de bordure : 50 % ; arrière-plan : dégradé linéaire (-30 degrés, orange 36,60 %, transparent 36,60 %) 100 % 0 ; background-repeat : pas de répétition ; taille de l'arrière-plan : 50 % 50 % ; }
  

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