Building a CSS3 Compass

Rishabh

• 31552
• 13
• 2

Creating a neat little CSS Compass can be quite easy and fun.

Some things to note:

• For the pointer I simply used a div with linear-gradient and applied the skewX transformation on it, all using CSS3. Neat trick, eh?

  The skewing did not work properly on the element itself so I applied it to the :before pseudo-element of #pointer.

• Rotation of the pointer is simple CSS3 keyframes (animations).

• Gloss is achieved with linear-gradient on the main element's :after pseudo-element.

• Directions have been all positioned absolutely.

Lets do it!

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room