texto - dibujar figuras css

¿Cómo dibujar un sector circular en CSS?

Question

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:

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

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

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

Answer 1

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

<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

Demostración: http://jsfiddle.net/jonathansampson/7PtEm/

gráficas vectoriales escalables

Si se trata de una opción, puede lograr un efecto similar utilizando elementos SVG <circle> y <path> . Considera lo siguiente:

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

Lo anterior es bastante directo. Tenemos un elemento que contiene un círculo y una ruta. El centro del círculo está en 115x115 (haciendo que el elemento SVG sea 230x230). El círculo tiene un radio de 110, por lo que es un total de 220 de ancho (dejando un borde de 10).

Luego agregamos un elemento <path> , que es la parte más complicada de este ejemplo. Este elemento tiene un atributo que determina dónde y cómo se dibuja la ruta. Comienza con el siguiente valor:

M115,115

Esto instruye a la ruta para que comience en el centro del círculo antes mencionado. A continuación, trazamos una línea desde esta ubicación hasta la siguiente ubicación:

L115,5

Esto dibuja una línea vertical desde el centro del círculo hasta la parte superior del elemento (bueno, cinco píxeles desde la parte superior). Es en este punto que las cosas se vuelven un poco más complicadas pero aún muy inteligibles.

Ahora dibujamos un arco desde nuestra ubicación actual (115,5):

A110,110 1 0,1 190,35 z

Esto crea nuestro arco y le da un radio que coincide con el de nuestro círculo (110). Los dos valores representan el radio xy el radio y, y ambos son iguales ya que estamos tratando con un círculo. El siguiente conjunto de números importantes es el último, 190,35 . Esto le dice al arco dónde completar.

En cuanto al resto de la información ( 1 0,1 z ), estos controlan la curvatura, dirección y terminal del arco mismo. Puede obtener más información sobre ellos consultando cualquier referencia de ruta SVG en línea.

Para lograr un "corte" de un tamaño diferente, simplemente cambie el 190,35 para reflejar un conjunto de coordenadas más grande o más pequeño. Es posible que necesite crear un segundo arco si desea abarcar más de 180 grados.

Si desea determinar las coordenadas xey desde un ángulo, puede usar las siguientes ecuaciones:

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

Con el ejemplo anterior, un grado de 76 sería:

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

Lo que nos da 205.676,177.272 .

Con cierta facilidad, puede crear lo siguiente:

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>

Demostración: http://jsfiddle.net/jonathansampson/tYaVW/

Answer 2

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 here

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

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

Answer 3

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

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

Fiddle de trabajo

En realidad, aquí se necesita un cálculo de geometría. Pero permítanme explicarlo en resumen:

Teniendo en cuenta los 4 trimestres en el círculo, el ángulo de gradiente lineal se puede calcular en cada trimestre. Y la background-position determina el trimestre:

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

Lo único que queda es de dónde viene el color-stop usado:

Considere una pieza de 30 círculos en el primer trimestre .

Como la talentosa Ana Tudor ha explicado en su gran artículo : Si tomamos la longitud del ancho del cuadrado para ser a , entonces la longitud de la mitad de la diagonal va a ser a*sqrt(2)/2 .

Si consideramos que el grado de gradiente es g la diferencia entre dos ángulos de gradiente y diagonales para que sea d , la duración de color-stop del color-stop se puede calcular de la siguiente manera:

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

Entonces, en este caso tenemos sin(30deg) / (sqrt(2)*cos((45-30)deg)) = 0.3660 , y el valor del% para el stop de color es 36.60%

Como nuestra forma está en el primer trimestre, la background-position es 100% 0 .

y el gradiente lineal sería así :

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>

Recomiendo leer el artículo de Ana para más detalles.

Answer 4

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++) {
  $(''<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>

Esto se basa en el ejemplo de Racil aquí . (Tenga en cuenta que no pude usar el complemento de OP en la respuesta editada, ya que no funciona para sectores que abarcan más de 180 grados).

Answer 5

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

> Rotar transformar

Para ángulos 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:

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

<div></div>

> Transformación sesgada

¡También puedes poner la imagen dentro del sector!

Esto se puede hacer usando transformaciones skew en parent y -ve skew en pseudoelement:
Fiddle

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

Vea cómo funciona esto:

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>

Agradecimientos : no quiero ser un ladrón de autos, utilicé las ideas que había usado previamente here y here .

Answer 6

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

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

Demo

Answer 7

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

El HTML:

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

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

Answer 8

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

<div id="pie"></div>

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

Answer 9

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.

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

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

Demostración animada de JSFiddle

Answer 10

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

<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

Answer 11

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:

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.

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