How to design with CSS shapes: An introduction

The basis of every website is to sub-divide the page down into smaller elements that have content. The big problem with this for designers is that the content is always a rectangle. Screens are rectangular in shape, and any subdivision of that is going to be a rectangle. In this tutorial we are going to examine how to go beyond rectangular shapes by using the CSS clip-path property and rotation to make the design more interesting. For other ways to make your designs more interesting, check out our examples of CSS animation. If all this sounds like too much work, try a top website builder instead. But whatever the needs of your site, you need to get the right web hosting for you.

The easiest shape to start with is a circle or oval. If you have a rectangle and you set all of the border radius to more than 50 per cent you will have an oval, and if you start with a square, because all the sides are the same length, you will get a circle. This is something you’ve probably done before, but it's a technique that is often underused in the design of pages.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Mark Shufflebottom

Mark is a Professor of Interaction Design at Sheridan College of Advanced Learning near Toronto, Canada. Highlights from Mark's extensive industry practice include a top four (worldwide) downloaded game for the UK launch of the iPhone in December 2007. Mark created the title sequence for the BBC’s coverage of the African Cup of Nations. He has also exhibited an interactive art installation 'Tracier' at the Kube Gallery and has created numerous websites, apps, games and motion graphics work.