CSS3 -wrap-shape and polygons

Recently, whilst stuck in procrastination limbo from university work, I found myself playing around with Adobe’s proposed CSS Regions Prototype, which you may or may not have heard of.  The purpose behind this prototype, is to allow developers to give websites a more enhanced look and take on an aesthetic more and more like that of a magazine or news paper. With the increasingly wide-spread usage of CSS3, this is already beginning to happen and personally I would love for these additions to go through.

Due to the fact that this spec is not currently approved and therefore not in any (At present, to my knowledge) of the main browsers, you will need to download the demo from the Adobe Labs, as linked above.

While -wrap-shape allows usage of “Circle” and some others (Spec here), as usual, I found myself inclined to jump in at the deep and end attempt what I’d been looking into doing when I stumbled upon the attribute.

Polygons

So, the first issue I had to tackle (Having used them for the first time during uni work a few days prior without much luck) was polygons, which are defined with an array of coordinates. x and y are separated by commas and points by space, which I found slightly counter-intuitive, but easy enough to get used to.

For instance, the following code would produce a small 150x150px square of text:

	
-webkit-wrap-shape:  polygon(0px, 0px 150px,0px 150px,150px 0px,150px);

And the following would produce a small diamond:

-webkit-wrap-shape:  polygon(100px, 0px 200px, 100px 100px,200px 0px,100px);

After a little tinkering, I was able to generate a rough demo of the effect I was going for:

You can download the source from the following link: simple_shape_modified