Taking CSS Shapes to the Next Level

In the previous tutorial, we took a glimpse at creating CSS Shapes, allowing us to define the true shape of an element. We touched on the basics; creating a circle and wrapping a few lines of text around it. Let’s now explore more complex shapes, making our page layouts richer and less boxy.

Taking CSS Shapes to the Next Level

Creating a Polygon

Beyond simple shapes like circles and rectangles we can also create polygons; shapes consisting of multiple (typically five or more) sides, such as a pentagon or a hexagon. To create one, we use the CSS polygon() function which takes multiple comma-separated value defining the shape coordinates:

.shape {
   float: left;
   background-size: contain;
   background-repeat: no-repeat;
   margin: 30px;
   width: 265px;
   height: 265px;
   shape-margin: 20px;
}
.pentagon {
   background-image: url('../img/pentagon.svg');
   shape-outside: polygon(32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px);
}

With the above code, we have added five coordinates, thereby generating a pentagon shape. Adding another coordinate to the function will turn the shape into a hexagon, one more for a heptagon, another for an octagon, and so on.

Creating a polygon shape manually is not as easy as creating a circle or an ellipse, especially if the polygon is complex and involves dozens of coordinates. Luckily, there is a handy tool which makes creating CSS Shapes more intuitive.

Using CSS Shapes Editor

CSS Shapes Editor is a Chrome extension. Once you have installed it, it adds a new tab named Shapes in DevTools under the Elements tab, inline with the other sub-tabs (Styles, Computer, etc.)

Taking CSS Shapes to the Next Level

The Shapes tab contains a shape-outside property paired with a plus + sign to help us add CSS Shape functions. Let’s select the polygon() and the element on the page, then we can start drawing the shape right in the browser just like a graphics application.

Taking CSS Shapes to the Next Level

As we draw, the browser extension will update our polygon function with the respective coordinates of the shape drawn, simultaneously adding it as an inline style to the element. Once done, copy the generated code and paste it into your stylesheet.

Taking CSS Shapes to the Next Level

Using this same technique we can easily draw and apply any form or shape on our webpage, for instance:

Taking CSS Shapes to the Next Level

Extracting the Image Shape

Another possible value we can use in the shape-outside propertyis the url() function; the same function that we use elsewhere in CSS to add a background image. In this case the url() function enables the shape-outside property to define an element shape based on the image.

You might choose to use the url() function instead of polygon() when you have a particularly complex graphic, with many curves and corners and you want your content to wrap around it smoothly. Or, when dealing with user-generated content in which defining the shape could be tricky.

We’re going to use this macaw parrot from Unsplash. First, you will need to create a version with transparency, for instance:

Taking CSS Shapes to the Next Level

The original parrot image is added to the container as a background image:

.container {
   background-repeat: no-repeat;
   background-image: url('../img/parrot.png');
}

Transparency Threshold

For the shape itself, we’ll add that to another element within the container, and this time we’ll use another CSS Shape property called shape-image-threshold.

.shape {
   shape-margin: 15px;
   shape-outside: url('../img/parrot-shape.png');
   shape-image-threshold: 0;
}

This particular property sets the threshold of minimum transparency that defines the image shape; it takes a number between 0 to 1 as the value. So if you have slightly transparent image you may want to set it at 0.8 or 0.5. We’ve set our value to 0 since the area surrounding the parrot shape is completely transparent.

The outcome should look something like:

Providing Fallback

Browser support for CSS Shapes is decent; though don’t expect much from Firefox, Internet, Explorer or Edge. Also, responding to Stephen’s question in the previous tutorial, we have several options.

“This is cool, but genuine question: what is the fallback for IE/FF? It seems like going all-in with a shape layout would end up in some weird places for a lot of users.” – Stephen Bateman

First, we can use Modernizr. Modernizr is a reliable JavaScript library for browser feature testing. Ensure you have included the CSS Shapes and the Add CSS classes option when downloading the library. Then you can specify the layout styles when CSS Shape is not supported, as follows:

/**
 * When the browser does not support "CSS Shape".
 */
.no-shapes .shape {
   shape-outside: polygon();
}

/**
 * Styles when the browser supports "CSS Shape".
 */
.shapes .shape {

}

If loading Modernizr seems too much, since you only need to test whether the browser has CSS enabled, you can add the following JavaScript lines.

if ('undefined' === typeof document.querySelector('.shape').style.shapteOutside) {
   document.body.classList.add('no-css-shape');
}

Each property in CSS comes with its equivalent under the JavaScript Style object, which allows us to add style dynamically trough JavaScript. This code detects whether the browser has the shapeOutside method, then where that’s not the case we add the no-css-shape class which we can utilize to add the fallback styles.

.shape {
   shape-outside: polygon();
}
.no-shapes .shape {

}

Lastly, we can use the CSS @support syntax in the stylesheet, for example.

@supports (shape-outside: circle()) {
   .shape {
      shape-outside: circle();
   }
}

It’s up to you to decide which approach best fits your project.

A great thing about CSS Shapes is that is has a natural fallback. No biggie. Have a square. http://t.co/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP

— Jen Simmons (@jensimmons) February 11, 2015

Wrapping Up

In this tutorial, we discovered how to use the polygon() function in CSS Shape and learned how we can draw polygons easily using a Chrome extension. We also learned how to leverage an image to draw shapes for us; particularly useful with overly complex shapes. Lastly, despite the CSS Shapes reasonable browser support, we talked about using graceful alternatives for unsupported browsers.

Demos

Useful Links

Views: (5)