Segments in a circle using CSS3

Question

I know you can make a circle in CSS3 using the border radius hack. But is there any way to make them have segments like this picture? Is there a way of doing this through HTML and CSS but not JS?

Answer 1

Yes, you can get such slices of custom angles using either one of the following two methods:

1. If you don't need the slices to be elements themselves, the you can simply do it with one element and linear gradients - see this rainbow wheel I did last month.
2. If you need the slices to be elements themselves, then you can do it by chaining rotate and skew transforms - see this circular menu I did a while ago.

For #2, see also this very much simplified example I did right now.

.pie {   overflow:hidden;   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 */

<ul class='pie'>   <li class='slice'>     <div class='slice-contents'></div>   </li>   <!-- you can add more slices here --> </ul>