¿Cómo dibujar un sector circular en CSS?

Bueno, dibujar un círculo con CSS puro es fácil.

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

¿Cómo dibujo un sector? Dado un grado X [0-360], quiero dibujar un sector de X grados. ¿Puedo hacer eso con CSS puro?

Por ejemplo:

enter image description here

Gracias + Ejemplo

Gracias Jonathan, utilicé el primer método. Si ayuda a alguien, aquí hay un ejemplo de una función de JQuery que obtiene un porcentaje y dibuja un sector. El sector está detrás del círculo de porcentaje y este ejemplo muestra cómo lograr un arco alrededor de un círculo desde un grado de inicio.

 $(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%); } 
  
66

Demostración 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)'); }); 

CSS y múltiples degradados de fondo

En lugar de tratar de dibujar la parte verde, puede dibujar las partes blancas en su lugar:

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

Eso es muy posible utilizando las propiedades de overflow y transform sin necesidad de hacer cálculos complejos.

> Rotar transformar

Para angularjs inferiores a 180 grados

  1. Agregue un elemento con relación de aspecto 2: 1 y overflow: hidden;

  2. Agregue un pseudo-elemento con radios de borde superior iguales a la altura del elemento y radios inferiores como 0.

  3. Poner transform-origin: 50% 100%; Esto transforma el pseudo-elemento de su parte inferior central.

  4. Transformar: rotar (); el pseudo elemento por suplemento del ángulo requerido,
    es decir , transform: rotate(180 - rqrd. angle);

Vea cómo funciona:

enter image description here

P.EJ :
Un sector de 40deg que usa este método: Fiddle

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

¿Esto ayuda?

 .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%; } 
 

dado que no encontré ninguna respuesta satisfactoria, tuve que arrodillarme, utilizando la función de ruta de recorte y todo un domingo de CSS para finalmente obtener lo que quería.

puedes elegir un ángulo de inicio y finalización y luego el elemento dibujará muy bien solo eso, nada más. Necesitará solo la solución de radio límite para dibujar el círculo base.

my solutions funciona con una grilla de cuatro polígonos, cada uno de los cuales proporciona un posible punto de inicio o final para los valores 0-90 ° resp. 0-100%, 90-180 ° resp. 0-100% y así sucesivamente, compartiendo el punto central y, por lo tanto, hay dos veces 4 segements. se podría pensar en la mecánica como una varilla telescópica con múltiples segmentos, cada uno haciendo su trabajo segmentado de 0 a N. debido a la mecánica, manteniendo al mismo tiempo algo de claridad en el código (0-90,90-180 …). tuvo que girar manualmente (-45deg) el div, de modo que 0 ° == 12 ”.

aquí hay un pequeño boceto que puede ilustrar cómo lo hice:

esquema

tenga en cuenta que no puede usar esto para fines comerciales ya que no encontré ninguna solución como esa en línea, por lo tanto, tiene que ser de algún valor. por favor respeta esto.

dibujar segmentos circulares usando css von c. schaefer ist lizenziert unter einer Creative Commons Namensnennung – Nicht kommerziell – Keine Bearbeitungen 4.0 International Lizenz.

    

}

    

Tengo otra solución.

 #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); } 
 

Mira esto para tener una idea de cómo resolver tu problema.

 
.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); }*/

Manifestación

  1. Tu necesidad de dibujar un círculo
  2. usa clip-path para cortar un sector (necesitas hacer algo de matemática)

puedes jugar con clip-path aquí

aquí hay una demostración:

 #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); } 
 

Todas las respuestas aquí son creativas. Es increíble cómo las personas resuelven el mismo problema de muchas maneras. La respuesta aceptada por Sampson es realmente genial, pero no sé por qué decidió dibujar la parte blanca en lugar del verde, así que pensé en compartir una versión modificada que realmente dibujara el verde. Simplemente lo encuentro un poco más directo de esta manera, así que lo estoy compartiendo en caso de que otros lo encuentren útil también.

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

Como necesitaba esto de forma dinámica, aquí hay un pequeño complemento jQuery. por ejemplo, llame a $('selector').pieChart(0.4, 'white' 'green') para mostrar un segmento verde del 40% en un círculo blanco.

 // 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++) { $('
').appendTo('body').pieChart(i/10, 'white', 'green'); }
 .pie { display: inline-block; margin: 10px; border-radius: 50%; width: 100px; height: 100px; } 
  

Sencillo. Solo sigue el código a continuación:

El HTML:

 

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

Tengo un enfoque ligeramente diferente, y uno que se puede animar fácilmente sin usar SVG.

Utiliza anchos, alturas y anchos de borde muy específicos, junto con recorte rectangular, por lo que estos deben manejarse con cuidado cuando necesite cambiar las dimensiones. El punto más importante a tener en cuenta aquí es que si desea cambiar el tamaño del pie, debe actualizar todos los valores em PROPORCIONALMENTE , lo que significa que todos deben ser escalados por el mismo factor.

Tenga en cuenta que se debe agregar un semicírculo completo si el pastel está lleno en más del 50% (> 180 degs está coloreado). Esta porción debe manejarse dinámicamente en JS si la está animando.

  

Aquí está el violín para demostrar, que es mucho más simple que explicarlo por escrito:

Demostración animada de JSFiddle