Free your web layouts with CSS Shapes

Web designers have long been forced to create within the constraints of the block. Since the majority of daring ventures into non-rectangular layout using CSS and HTML end in frustration, most content on the web is still trapped in simple boxes.

Creative uses of border-radius and CSS transform properties only create the illusion of shapes and don't actually affect the content layout as expected. A circle carved with border-radius is still a rectangle in disguise. All this is about to change with the implementation of CSS Shapes.

CSS Shapes allows web designers to wrap content inside and around custom shapes. Shapes are defined in simple, practical and reusable ways, and, unlike most CSS hacks that just simulate shapes, can affect the entire layout of a web page.

Perhaps you've been as naive as me when first floating an image with some transparent parts expecting content to wrap neatly around it, filling the blanks. Instead, we saw it wrap around the image block. How disappointing! We can solve this problem using CSS Shapes.

Here's a simple circle shape example:

.foo { shape-outside: circle(200px at 50% 50%); float: left; }

The shape-outside property here creates a circle with a radius of 200px starting from the centre of the element. Use of the float property causes the content outside of the element to wrap around the circle shape. Note that this only affects the layout of content, not the clipping of the element itself to a circle; the clip-path property should be used for that and you can reuse the same property value. Content can also be wrapped inside of a custom shape by using the shape-inside property:

.bar { shape-inside: circle(50%, 50%, 200px); }

Explicit width and height must be set when using shape-* properties. For brevity, dimensions have been omitted from these examples.

Shape property values can be defined with built-in shape functions such as circle(), ellipse() and polygon(), or they can be derived from images which have an alpha channel by using url(path-to-image.png). All types of CSS units can be used within shape definitions. This means that shapes can also be responsive. Regular margin and padding don't make sense with shapes, especially when thinking about polygons. What is a margin-top for a triangle anyway? Two new properties, shape-margin and shape-padding, are used to achieve the desired effect.

CSS Shapes lend themselves to a progressive enhancement development approach. When not supported, browsers will ignore the shape properties and fallback to plain blocks, thus keeping content visible. However, as with all new features, due diligence is necessary to make sure content is accessible for all users.

The CSS Shapes specification and implementation are still in flux with changes likely to come. Because of this, the feature is behind a flag in Google Chrome. Adobe is working on the implementation of CSS Shapes and keeps track of browser support and how to enable the feature here.

Words: Razvan Caliman

Razvan Caliman is an engineer on the web platform team at Adobe. He experiments with cutting-edge web technologies and builds things to make life easier for web developers. This article originally appeared in net magazine issue 252.

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

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.