How to wrap text around custom shapes using CSS

Web pages have always been about rectangular content blocks stacked one next to the other.

Web designers are often frustrated when their out-of-the-box creative layouts get slashed by web developers, often citing complexity and cross-browser support.

With the introduction of CSS shapes, things have changed for the better. It has become easier than ever to wrap text around custom shapes like circle, ellipse, polygon.

Web designers can play around with complex shapes in their designs. And web developers don’t have to work extra hard to get them working across browsers. Now that’s a win-win.

Let me show you how I used this approach to code some of my clients otherwise challenging layouts.

About shape-outside property

The ‘shape-outside’ property can be applied to a floated element. It controls how content will wrap around the floated element. You can pass in values to the ‘shape-outside’ property to define the shape you want the text to be reflowed. Typical values can be circle, ellipse or a polygon.

Example 1 | Used Around A Circular Image : The Spanish Art Project

Here is the HTML/CSS that I used to code this layout.

See the Pen wrap text around circular image by Femy Praseeth (@femkreations) on CodePen.

.element {
float: left;
height: 10em;
width: 15em;
shape-outside: circle();
}

Example 2 | Used Around An Ellipse : The Espresso Campaign

Here is the HTML/CSS that I used to code this layout.

See the Pen wrap text around image-ellipse shape by Femy Praseeth (@femkreations) on CodePen.

NOTE:

The ellipse is defined as (rx ry at cx cy), where rx and ry are the radii for the ellipse on the X-axis and Y-axis, while cx and cy are the coordinates for the center of the ellipse

.circle{
float:left;
width:225px;
height:auto;
margin-right:1em;
shape-outside: ellipse(150px 150px at 20% 50%);
}

Example 3 | Used Around A Polygon Shape

Here is the HTML/CSS that I used to code this layout.

See the Pen wrap text around image – polygon shape by Femy Praseeth (@femkreations) on CodePen.

NOTE:

• The format for a polygon is (x1 y1, x2 y2, …) where you specify pairs of x y coordinates for each point of a polygon.
• The minimum number of pairs to specify a polygon is three, a triangle.
• You can set the coordinates of the points defining the shape in length units or percentages.
• Using percentages keeps the polygon responsive.

.polygon-art{
float: right;
height: 100vh;
width: calc(100vh + 100vh/4);
shape-outside: polygon(80% 0, 60% 0%, 50% 100%, 5% 60%, 45% 40%);
}

Example 4 | Used To Create Pull Quotes

Here is the HTML/CSS that I used to code this layout.

See the Pen wrap text-pull quote by Femy Praseeth (@femkreations) on CodePen.

.pull-quote{
shape-outside: content-box;
float: left;
width:350px;
height:auto;
font-size:18px;
font-weight:bold;
margin:0 1em 1em 0;
}

I hope you found this article interesting. I’d love to hear back from you when you try this out on your next project.