Free templates of CSS layout by using shapes

The CSS layout by using shapes

In this post, the CSS shapes are used for creating webpage layouts. FYI, the shape-outside property of CSS can be used for defining the float area for inline content for wrapping around a shape by specifying the shape values like margin-box, content-box, and function values e.g. circle, ellipse etc.

For example, this is how the shape-outside CSS property can be used:

 

 

OR

 

Similarly, you may use polygon(20px 20px, 30px 30px, 20px 20px) and inset(30px 20px 30px 20px) etc.

Btw, the purpose of this post is to share the free CSS template based on shape-outside property not explaining this  :-).

A demo of creating layout with circle shape-outside

In this demo of creating the CSS template, the circle shape is defined by using the shape-outside property.  First, have a look by clicking the links below:

See online demo and code

The CSS:

 

The markup:

 

A demo of creating layout with Polygon

In this example, the layout is created with the shape-outside and other properties of CSS. The shape-outside is assigned the polygon value as follows:

See online demo and code

The CSS for this demo:

 

The markup:

 

See the output and get the complete code from the demo page.

Using an image to shape up content

In this demo, an image is used as the value in shape-outside property. Have a look on the live demo where you can see the text is adjusted according to the image shape.

See online demo and code

The CSS:

 

Get the complete code from the demo page.

A demo with ellipse shape

See this demo where ellipse value is used to shape up content:

See online demo and code

Get the complete code from the demo page.