CSS gears project

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 😊

As I have said, this is just a CSS gear, not Javascript, nothing else, just CSS and HTML (actually is Less). Every gear is composed of 3 parts:

• 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 shown here

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.

See the Pen CSS Gears by Adrián Gómez (@adgllorente) on CodePen.