CSS Shapes Level 1 Examples

A collection of examples of CSS Shapes in use. I've used the Skeleton Framework in these examples just as a baseline for typography and so on. The actual CSS used for the shape example is embedded in the head of the page.

Uses Prefix Free, at the time of writing Safari requires the -webkit prefix.

Simple circle example.

Basic Shapes

The shape-outside property can take one of four basic shape functions as a value.

• inset()
• circle()
• ellipse()
• polygon()

Image

Pass in an image with an alpha channel and get the shape from that.

• Example with image

Reference boxes

Use a reference box to define the shape.

• Example using reference box

Icons from The Noun Project