CSS Shapes

Basic geometric primitives

Sometimes CSS can be as expressive as a 2D scripting library or a complex SVG markup. Such CSS features as filters, compositing or transforms enrich Web applications graphically without a single line of JavaScript code. One of the latest improvements in style algorithms allowing developers to create fancy effects for inline content is CSS Shapes - an advanced client technology implemented in stable releases of WebKit- and Blink-based. browsers.

The concept of shape is well known to developers using vector graphics in their works. A shape interface in object-oriented languages usually provides a "blueprint" for various geometric primitives - from rectangles to closed polylines. CSS shapes resemble conventional graphical objects, but their functionality is more restricted: the purpose of this new CSS technique is to make inline content wrap around the boundaries of a float element. The area used for wrapping content around the element is called float area: as a rule, it coincides with the element's margin box. All computations are performed in the coordinate space of the reference box: the space origin is placed at the top-left corner, x values are increasing to the right, and y values are increasing downwards.

The list of supported CSS shapes includes a rectangle, a rectangle with rounded corners, a circle, an ellipse and a polygon. A shape function is specified as a value of the shape-outside property. For demonstration purposes, the code in the article will create four slides for a Web presentation dedicated to the Internet email architecture. Each slide contains an image and a continuous text snippet that will be running smoothly around the edges of the image.

Rectangles

When a floating image is combined with inline content such as text, the text wraps around the rectangular image container:

Default dimensions of the image container can be changed by applying the inset() function:

<style type="text/css">
 img {
  float: left;
  shape-outside: inset(10% 14% 10% 0%);
 }
</style>

view the slide after applying the shape function

The inset() function can have up to four arguments defining the top, right, bottom and left inward offsets. The CSS code above creates an inset rectangle by shifting the boundaries of the floating image by 10% from the top, 14% from the right and 10% from the bottom. All arguments are expressed as percentages, though the function accepts absolute numeral values, too.

view rectangle geometry

If the function has a single argument, it applies to all sides. If there are two values, the top and bottom offsets are set to the first value and the right and left offsets gets equal to the second. If three arguments are provided, the top is set to the first argument, the left and right are set to the second, and the bottom offset gets the third value.

Rectangles with rounded corners are created by using the round keyword followed by values that must conform to the syntax of the CSS border-radius property:

shape-outside: inset(10% 14% 10% 0% round 12px);

Circles

A circle shape geometry is based on a center and a radius. The center point is optional for the CSS circle() function. As for the radius, it is expressed as an absolute length value, a percentage, or one of the following keywords - closest-side or farthest-side. In the snippet below, the radius of the shape is the length from the center of the circle to the farthest side of the element's reference box:

shape-outside: circle(farthest-side);

The second slide contains the same image surrounded with paragraphs of text; the text is rendered along the contour of a circle:

<style type="text/css">
 img {
  float: left;
  shape-outside: circle(120px);
 }
</style>

view circle geometry

To shift the center of the circle, position values preceded by the at keyword should be passed to the shape function. The code below moves the center of the circle 5% leftwards and 15% downwards from the center of the coordinate space:

shape-outside: circle(120px at 55% 65%);

Ellipses

An ellipse is aligned along the x and y axes of the reference box according to horizontal and vertical radii. Similar to circle declarations, the ellipse() function can use position values to define the center of the shape.

shape-outside: ellipse(100px 120px at 60%);

The next slide flows the text around the boundaries of an ellipse with two radii:

The code snippet for the demo above uses absolute values expressed in pixels for the ellipse radii. The center point is presumed to be at 50% 50%:

<style type="text/css">
 img {
  float: left;
  shape-outside: ellipse(100px 120px);
 }
</style>

view ellipse geometry

Polygons

A polygon is a closed shape consisting of a number of connected line segments. A segment is defined by setting the x and y coordinates of its vertices. At least three endpoints forming a polygon must be declared in a CSS rule. In the last slide the polygon() function is building a polygon enclosed by four lines: four pairs of the x and y coordinates set the position of four vertices, then the browser connects the last vertex with the first vertex in the range.

<style type="text/css">
 img {
  float: left;
  shape-outside: polygon(128px 0px, 256px 0px, 185px 256px, 57px 256px);
 }
</style>

A list of vertices in the polygon() function can be preceded by a fill-rule. The fill-rule determines what parts of the drawing surface are included inside the polygon. Default value is nonzero. The other value is evenodd.

view polygon geometry