Web Platform Team Blog

Making the web awesome

CSS Shapes geometry: discussed and demo’d

Flowing text around shapes shouldn’t be burdensome. If you have one continuous string of text, why not wrap it like a ribbon that can smoothly conform to a shape? The engineers who are implementing the CSS Shapes Module Level 1 spec are bringing that capability to the web platform.

Sara Soueidan experiments with creating non-rectangular layouts with CSS Shapes. Her articles spark ideas for creating magazine-like layouts and the creativity of taking shapes further with animation.

Hans Muller’s latest blog on the subject, A Simpler Algorithm for CSS Shapes Level 1, takes the time to break down what is happening on the implementation level.

The shape-margin property expands the polygon by the specified radial distance.

How does the shape-outside property flow content around a shape? Hans explains the fundamental geometry involved, and provides a demo that makes these concepts come to life.

Comments are closed.