How to Wrap Content in Custom Shapes with CSS3

By . in Coding. Updated on .

Print media, compared to web media, offers greater flexibility in content layout and display. However, replicating those intricate shape frames used in magazines on the web can be challenging due to the structured nature of web content.

Fortunately, the CSS3 team is developing new capabilities to make this possible for web content using the shape-inside property.

At present, this property is still in its early stages and, as of now, only works in Chrome (with a prefix). Additionally, some specifications are yet to be fully implemented.

Let’s explore how it works.

Using the shape-inside Property

The shape-inside property allows you to create four types of shapes: rectangle, circle, polygon, and ellipse. However, the only shape that appears to be functional at the moment is polygon. Below is an example of creating a triangle shape:

.basic-shape {
  font-size: 12px;
  width: 300px;
  height: 300px;
  overflow: hidden;
  text-align: justify;
  -webkit-hyphens: manual;
  -webkit-shape-inside: polygon(0px 0px, 0 300px, 300px 300px);
}

Here’s the result:

Triangle shape example with CSS3 polygon property

If you want to wrap your content in a custom shape but are unsure how to define the coordinates, here’s a simple method:

First, create the shape in a vector editor such as Adobe Illustrator or Inkscape. Then, save it in SVG format and open it in a text editor.

Locate the coordinates, assign a unit of measurement (px or %) to each, then copy and paste them as the polygon value. For example, here’s how to create a hexagon:

.svg-shape {
  -webkit-shape-inside: polygon(75.778px 272.829px, 1.555px 144.271px, 75.778px 15.713px, 224.222px 15.713px, 298.444px 144.271px, 224.222px 272.829px);
}

And the result is:

Hexagon shape example with CSS3 polygon property

It is technically possible to reference the SVG file directly to wrap content, but this functionality is not yet supported in current browsers.

Final Thoughts

While not every website will need to apply this property, these advancements hint at a more sophisticated future for web layouts. For more details, check out the following references:

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail