The Power of CSS Shapes


By , March 22nd, 2013 , Tags: , 0 Comments

I put together this small resource to hopefully help other designers and developers with a list of mainly geometric shapes you can perform using CSS3.

I personally used a list of shapes like this when I was building a project or just experimenting with CSS3, so I felt it would be cool to share.

Under no circumstance do I think I’m some CSS ninja, I’m just sharing a few snippits of code I use and if you know a better way of doing it or know any other shapes I have missed please get in touch!

Square

Rectangle

Circle

Oval

Triangle Up

Triangle Down

Triangle Left

Triangle Right

Triangle Top Left

Triangle Top Right

Triangle Bottom Left

Triangle Bottom Right

Curved Tail Arrow via Ando Razafimandimby

Trapezoid

Parallelogram

Star (6-points)

Star (5-points) via Kit MacAllister

Pentagon

Hexagon

Octagon

Heart via Nicolas Gallagher

Infinity via Nicolas Gallagher

Diamond Square via Joseph Silber

Diamond Shield via Joseph Silber

Diamond Narrow via Joseph Silber

Cut Diamond via Alexander Futekov

Egg

Pac-Man

Talk Bubble

12 Point Burst via Alan Johnson

8 Point Burst via Alan Johnson

Yin Yang via Alexander Futekov

Badge Ribbon via Catalin Rosu

Space Invader via Vlad Zinculescu

TV Screen

Chevron via Anthony Ticknor

Magnifying Glass

Did we miss anything?

If you have any CSS shapes, leave a comment below and we’ll add it to the list.