Exploring CSS Shapes (in-depth)

CSS Shapes is an emerging web content layout feature that will eventually transform web design. CSS Shapes will bring us closer to the flexibility of text and images in ways previously only possible in print media.

I’ve provided a basic intro here. This article explores further into CSS Shapes, with several code examples to follow along.

In a nutshell, CSS Shapes can take you from this:

Valentine’s Day is one of the major commercialized holidays in the United States, in terms of consumer spending. On this day, which occurs every 14th of February, it’s a commonly formalized tradition for loved ones to recognize each other in a romantic way, usually with flowers and gifts, and also with dinner. A reality with dining out on Valentine’s Day is that restaurants get very busy and raise their prices by offering exclusive Valentine Day’s menu options. For this reason, many choose to celebrate with an intimate meal prepared at home.

To this, with text elegantly wrapped around a visual object.

Valentine’s Day is one of the major commercialized holidays in the United States, in terms of consumer spending. On this day, which occurs every 14th of February, it’s a commonly formalized tradition for loved ones to recognize each other in a romantic way, usually with flowers and gifts, and also with dinner. A reality with dining out on Valentine’s Day is that restaurants get very busy and raise their prices by offering exclusive Valentine Day’s menu options. For this reason, many choose to celebrate with an intimate meal prepared at home.

Here’s the underlying code. It’s pretty simple, beginning in HTML by placing an image and a text paragraph. Then, for the CSS, float the image to the left and apply two important properties: shape-outside and shape-margin.

<img src="heart.png" />
<p>Valentine's Day is one of the...</p>
img {
	float: left;
	/* These two lines define CSS Shapes */
	shape-outside: url(heart.png);
	shape-margin: 20px;
}

shape-outside is the region around which text can flow. The region can be defined in several ways. In this case, it’s the opaque area of a PNG image, so that text runs into the transparent background. The shape-margin property adds spacing between the heart (opaque area) and the text.

There are several other ways to define the region for shape-outside. You can define this as a shape, which can be a rectangle (also known as an inset), circle, ellipse, or polygon. Here’s an example for a circle.

Valentine’s Day is one of the major commercialized holidays in the United States, in terms of consumer spending. On this day, which occurs every 14th of February, it’s a commonly formalized tradition for loved ones to recognize each other in a romantic way, usually with flowers and gifts, and also with dinner. A reality with dining out on Valentine’s Day is that restaurants get very busy and raise their prices by offering exclusive Valentine Day’s menu options. For this reason, many choose to celebrate with an intimate meal prepared at home.

And here’s the code that makes it happen:

<p class="circle">Some products are easy to...</p>
p.circle::before {
	content: "";
	float: left;
	width: 12rem;
	height: 12rem;
	/* These two lines define CSS Shapes */
	shape-outside: circle(40%);
	shape-margin: 20px;
	/* These lines allow the circle to be visualized */
	clip-path: circle(40%);
	-webkit-clip-path: circle(40%); /* For Safari browsers */
	background-color: mediumaquamarine;
}

Another way to create regions for CSS Shapes is through the use of gradients. Take a look at this.

Valentine’s Day is one of the major commercialized holidays in the United States, in terms of consumer spending. On this day, which occurs every 14th of February, it’s a common tradition for loved ones to recognize each other in a romantic way, usually with flowers and gifts, and also with dinner. A reality with dining out on Valentine’s Day is that restaurants get very busy and raise their prices by offering exclusive Valentine Day’s menu options. For this reason, many choose to celebrate with an intimate meal prepared at home.

It’s always essential that the object for CSS Shapes, whether an image, shape, or gradient, be floated to the left or right.

<div class="gradient-left"></div>
<div class="gradient-right"></div>
<p>Valentine's Day is one of the...</p>
div.gradient-left {
	float: left;
	width: calc(12rem * 1.25);
	height: 12rem;
	background: linear-gradient(140deg, rgba(0,212,255,1) 30%, rgba(0,212,255,0) 50%);
	shape-outside: linear-gradient(140deg, rgba(0,212,255,1) 30%, rgba(0,212,255,0) 50%);
	shape-image-threshold: 0.4;
}
/* div.gradient-right is similar except that it's floated to the right and the gradient direction is -40deg */
p {
	text-align: justify;
}

The gradients here are defined for a solid color transitioning to transparent. A third property for CSS Shapes, shape-image-threshold, lets you set the positioning of text based on the transparency level, or alpha channel of the object. In this case, it’s a gradient, but can also apply to a drop shadow in a PNG image with transparent background.

Sometimes you may run into a situation in which you want to wrap text around an irregularly shaped object. A great way to accommodate this is by creating a polygon shape around the object. See this example below.

When it comes to producing high quality, fine wines, we generally consider Northern and Central California, France, Italy, Argentina, Australia, and Spain among the best-known regions. But believe it or not, there are regions in Asia also known for winemaking, among them China and Japan. In fact, China is considered to be among the top ten wine markets worldwide. As one of the world’s top five in terms of wine consumption, it’s no surprise that winemaking is very active in China to meet an ever-increasing demand among a growing public with affluence.

If you try to code out the polygon shape, you’ll immediately find it rather unpleasant as it’s simply too difficult to visualize a shape based on a morass of numbers.

img {
	float: left;
	width: 400px;
	shape-outside: polygon(33% 13.4%, 2.5% 3.55%, 1.85% 100.35%, 52.65% 99.60%, 58.5% 76.1%, 45.75% 62.05%, 39.25% 32.3%);
}

Fortunately, there’s an excellent solution to this problem: the developer tools in the Firefox browser.

With this great resource, you can visualize the shape on-screen and manipulate the handles to modify the shape. You can also add or remove handles with ease.

We’re actually at what’s formally called the CSS Shapes Module Level 1 specification, with further development and enhancements coming down the line in CSS Shapes Module Level 2.

Finally, a reminder about CSS Shapes compatibility with browsers. Basically, you’re good to go with Chrome, Firefox, and Safari, but not so with IE or Edge. The fallback is just the standard rectangular text block, which should be just fine in most cases.

If you’re interested in learning more about CSS Shapes, here are some recommended resources: