Art Direction For The Web Using CSS Shapes: Article on Smashing Magazine

Last year, Rachel Andrew wrote an article that took a new look at CSS Shapes in which she reintroduced readers to the basics of using CSS Shapes. In a new tutorial for Smashing Magazine, I expand on the topic of Art Direction for the Web with CSS Shapes to create exciting and inspired new design ideas.

For anyone keen to understand how to use properties like shape-outside, shape-margin, and shape-image-threshold, Rachel’s is the ideal primer. I’ve seen many examples of using the properties, but very few go beyond Basic Shapes, including circle(), ellipse(), inset(). Even examples using polygon() shapes rarely go far beyond them. Considering the creative opportunities CSS Shapes offer, this is disappointing. But, I’m sure that with a little inspiration and imagination, we can make more distinctive and engaging designs. So in this article, I show you how to use CSS Shapes to create five different types of layout. They are:

  1. V-shapes
  2. Z-patterns
  3. Curves
  4. Diagonals
  5. Rotated shapes
Art Direction for the Web with CSS Shapes
Art Direction for the Web with CSS Shapes. Download the examples.

I hope this tutorial will inspire web designers to create designs which are distinctive and engaging. It’s also for front-end developers who want to learn how to implement those designs using the most efficient HTML and CSS.

Read Art Direction for the Web with CSS Shapes on Smashing Magazine now. You can download the examples from this article too.


I’m available for hire to consult on and design products and websites. Based in North Wales, I travel regularly to work with clients world-wide.

Available from January 2020

Talk soon

For work enquiries email

Or call us on +44 (0)1745 851848


Stuff & Nonsense Ltd.
Eversleigh, Lon Capel,
Flintshire, North Wales,
LL18 6EJ, UK