Skip to main content
Home / Articles /

The Shapes of CSS

CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.

We also get the ::before and ::after pseudo-elements in CSS, which give us the potential of two more shapes we can add to the original element. By getting clever with positioning, transforming, and many other tricks, we can make lots of shapes in CSS with only a single HTML element.

Square Shape

Rectangle Shape

Circle Shape

Oval Shape

Triangle Up Shape

Triangle Down Shape

Triangle Left Shape

Triangle Right Shape

Triangle Top Left Shape


Triangle Top Right Shape


Triangle Bottom Left Shape


Triangle Bottom Right Shape

Curved Tail Arrow Shape via Ando Razafimandimby


Trapezoid Shape

Parallelogram Shape

Star (6-points) Shape

Star (5-points) Shape via Kit MacAllister


Pentagon Shape


Hexagon Shape via Aaron Hanson


Octagon Shape


Heart Shape via Nicolas Gallagher


Infinity Shape via Nicolas Gallagher


Diamond Square Shape via Joseph Silber


Diamond Shield Shape via Joseph Silber


Diamond Narrow Shape via Joseph Silber

Cut Diamond Shape via Alexander Futekov


Egg Shape


Pac-Man Shape


Talk Bubble Shape

RSS Feed Shape via Kevin Huff


12 Point Burst Shape via Alan Johnson


8 Point Burst Shape via Alan Johnson


Yin Yang Shape via Alexander Futekov


Badge Ribbon Shape via Catalin Rosu


Space Invader Shape via Vlad Zinculescu


TV Screen Shape

Chevron Shape via Anthony Ticknor


Magnifying Glass Shape


Facebook Icon Shape via Nathan Swartz


Moon Shape via Omid Rasouli


Flag Shape via Zoe Rooney

Cone Shape via Omid Rasouli


Cross Shape via Kaya Basharan

Base via Josh Rodgers

Pointer via Amsakanna Freethinker

Lock Shape