custard doughnuts

fully automated
Portfolio

How to make segmented circles in CSS

Saturday 14th of May 2016

It's been possible to make circles, semi circles and quarter circles using only CSS ever since the border radius property came along. But what if you wanted to make a circle with more than four segments?

I've seen it done but only occasionally and in a very fixed way. If there was a way of generating a single segment of a circle based on a mathematical formula, would it be possible to write a CSS mixin to generate a circle containing any number of required segments? Short answer: yes.

Read more