Segmentos en un círculo usando CSS3

Sé que puedes hacer un círculo en CSS3 usando el hack de radio de borde. Pero, ¿hay alguna forma de hacer que tengan segmentos como esta imagen? ¿Hay alguna forma de hacerlo a través de HTML y CSS pero no de JS?

enter image description here

Sí, puedes obtener esas divisiones de angularjs personalizados usando cualquiera de los dos métodos siguientes:

  1. Si no necesita que las rebanadas sean elementos en sí mismas, simplemente puede hacerlo con un elemento y degradados lineales: vea esta rueda de arcoíris que hice el mes pasado.
  2. Si necesita que las rebanadas sean elementos en sí mismas, puede hacerlo encadenando transformaciones de giro y sesgado – vea este menú circular que hice hace un tiempo.

Para # 2, vea también este ejemplo muy simplificado que hice en este momento.

 .pie { position: relative; margin: 1em auto; border: dashed 1px; padding: 0; width: 32em; height: 32em; border-radius: 50%; list-style: none; } .slice { overflow: hidden; position: absolute; top: 0; right: 0; width: 50%; height: 50%; transform-origin: 0% 100%; } .slice:first-child { transform: rotate(15deg) skewY(-22.5deg); } .slice-contents { position: absolute; left: -100%; width: 200%; height: 200%; border-radius: 50%; background: lightblue; } .slice:first-child .slice-contents { transform: skewY(22.5deg); /* unskew slice contents */ } .slice:hover .slice-contents { background: violet; } /* highlight on hover */ 
 

    Sí, puedes: http://jsfiddle.net/elias94xx/3rx7w/ , http://jsfiddle.net/elias94xx/3rx7w/2/

     #chart { width: 0; height: 0; border-right: 60px solid purple; border-top: 60px solid transparent; border-left: 60px solid transparent; border-bottom: 60px solid transparent; border-radius: 60px; -moz-border-radius: 60px; -webkit-border-radius: 60px; }