Wrapping Content In Shapes With CSS3

Print media (as compared to web media) has a greater flexibility when it comes to content layout and display. Due to the way web content is structured, it’s quite tricky to put text into those unusual shape frames, like how the magazines do.

However, the CSS3 team is currently working to make this possible for web content, with the use of shape-inside.

This property however is still very new and at the time of this writing, it works only in Chrome (with prefix), and some specifications have yet to be implemented.

Let’s see how it works.

How to Use shape-inside

The shape-inside allows us to form four shapes: rectangle, circle, polygon, and ellipse, though the shape that seems to work at the moment, is only the polygon. In the following example, we will try a triangle.

.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);

This gives us.

If you want to wrap your content in a custom shape, but you don’t know how to set the cordinates, here is the trick.

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

Find the coordinates, assign each of them with a unit measurement (px or %). Copy them, and paste it as the polygon value. In this example, I simply 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);

Which results in

Actually, it is possible to refer directly to the SVG file to wrap the content. Unfortunately, it doesn’t work at the moment as the browser has yet to implement it.

Final Thought

Not every website will apply this property. But, with all these advancements, Web layout will be more sophisticated in the future. For more, you can head over to the following references.