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

Wrap text around the circular image
Wrap text around the circular image

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

How to wrap text around custom shapes
Wrapping text around espresso cup in an ellipse shape

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

See the Pen wrap text around shapes-espresso 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

How to wrap text around custom shapes
Wrapping text around an image in 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

Using css shapes to create pull quote
Using css shapes to create pull quote

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.

Send me a link where you used this approach to wrap text around a custom shape.

Subscribe by email
If you're an email kind of person, sign up below to get the latest blog posts in your inbox! You might get some free WordPress goodies from me:-).
I promise not to spam you or share your address.

Client Love

Femy’s a great front-end developer with excellent capabilities in XHTML/CSS/Javascript. She’s especially skilled with skinning ASP.Net websites–working in Visual Studio with .Net’s built-in controls and Telerik’s Rad Control package.

Arthur Wait VP, Engineering, Solutionset