Since a few weeks ago I wanted to design a gear using only CSS. I wanted to use these gears in a future project but after finishing them, I think this is not going to be as easy as I expected ?
- The colored part of the gear
- Four bars rotated every 45 degrees to build teeth
- A smaller centered circle that simulates the hole of the gear.
Every gear is created using this less mixin and the HTML code below:
You can take a look to the final result below. Of course you are free to fork this code or use it wherever you want.