creating polygon shapes

the easy way.

Tools to draw polygons exist, but I prefer to carve out and tune those shapes where they belong – inside my regular layout, with all other relevant and irrelevant styles applied. Less chance for line-up failures that way.

First I form the actual shapes, surrounded by dummy content in the form of a dot raster.

Images go here…

Partial screenshot provided for those who cannot see the live line-up…
The image used is found elsewhere, where it has been retrofitted with the shapes shown here.
Polygon styles are found in the page head.

The font-size for the dot raster is 16px and the line-height is only 0.3vw, and text-justify is used. This tight raster provides clear content-edges next to the created shapes.

The floating picture is pulled over the edge of the container by its right margin in %, causing it to reposition itself horizontally to make the most out of available window width. It also gets resized by max-width to fit in on narrow windows.
The polygon shape is declared in %, and follows the image itself during resizing. Applied margins can cause problems with line-up variations in responsive layouts, and the same goes for relative offsets.
I have made slight modification to shape-margin to make line-up adjust to changes in overall styling when the one-column design kicks in on very narrow windows / screens.

reality check

Next step is to test with regularly styled text on the page.

Images go here…

Screenshot of left float with text line-up…
Polygon shapes are styled pretty tight on the image, but as line-height controls how paragraph lines butt up against the more horizontal polygon shapes, the text will naturally keep its distance along the slope declared for upper part of this image.

Proper testing with text in the flow, makes it a lot clearer what can work and what won't work, than a raster or polygon-lines do.
For instance: the dummy-text above is left-aligned, which makes line-up against the polygon shapes on right-floating image more “accidental” and jagged – same as for real text in a page. Justifying the text does not always help much on the overall line-up.

early days for shapes

Both standards and support for shapes are at an early stage, but shapes can nevertheless provide some welcome progressive enhancement in supporting browsers.

Testing new features at an early stage, is of course important. I have already discovered that current imple­men­tations of shapes are restricting, and in some cases break, normal content-flow in unexpected ways. These apparent bugs1 are worth some real-world investigations.

As usual I have tailored some simple tools to help in manual shaping and testing of shapes and whatever other features I might like to include on web sites. Armed with these tools I can easily sort out what works and what doesn't work where, and separate browser bugs from my very own designer bugs2 in the process.

Why I prefer this direct approach over existing tools and solutions to the creation of shapes, has to do with the simple fact that I have been “carving out” web sites for a long time4, and have usually found the simplest and most “locally invented” solutions to work best and cover most cases in the long run.

Tiptoe'ing around potentially problematic areas in web design, has never been my style, and I see no reason to change my approach now. Browser vendors will keep on talking and writing about how fast and powerful their products are in certain areas, and they are more than welcome to do so.
I am more into revealing the same browsers' weaknesses by challenging them in every area that is of any interest to me, with the goal of making browsers work, for me. All in the name of progress…

sincerely  georg; sign

Hageland 14.sep.2016
last rev: 19.jan.2021 advice upgrade advice upgrade navigation