Web Platform Team Blog

Adobe

decor

Making the web awesome

Create shapes with CSS box properties demo

Note: CSS Shapes syntax has changed. For the latest information, see CSS Shapes Module Level 1.

Hans Muller reviews the box shape geometry involved in specifying CSS Shapes as a CSS box. You can generate many shapes by referring to edges in the CSS Box Model. But, as Hans put it in an early post, “You must remember that the CSS Box Model is a set of four rectangular Russian dolls.” In this latest post, Boxed Into Corners: Shapes, Boxes, and Corner Radii, Hans goes into detail about how these nested boxes effect and constrain each other.

And at any point, if the details become obscure, just scroll down to the demo, and try out some use cases for yourself.

boxed_into_corners_lo_res

Comments are closed.