Skip to main content

Creating CSS Shapes (Live Playground)

In this tutorial, we'll explore how to create CSS shapes and wrap content around them. This technique allows for more visually appealing designs and better content flow.

shape-outside property​

The shape-outside property defines a shape around which inline content should wrap. This property is often applied to floated elements.

Example:

CSS
.shape {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle();
}

Wrapping content around a circle​

You can create a circular shape using the circle() function and wrap content around it.

Example:

CSS
.circle {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
}
Live Playground, Try it Yourself

Wrapping content around a polygon​

To create custom shapes, you can use the polygon() function and define coordinates for each point.

Example:

CSS
.polygon {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: polygon(0 0, 100% 0, 50% 100%);
}
Live Playground, Try it Yourself

Using an image as a shape​

You can use the url() function to reference an image as the shape for content wrapping. The image's alpha channel determines the shape.

Example:

CSS
.image-shape {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: url('shape-image.png');
}

Conclusion​

In this tutorial, we learned about creating CSS shapes and wrapping content around them. This technique can enhance your designs and improve content flow on your web pages. Experiment with different shapes and images to create visually appealing layouts for your projects.