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?
Yes, you can get such slices of custom angles using either one of the following two methods:
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With