Traditional Box Shaped Websites

Every website we browse on a daily basis has one thing in common, rectangles within rectangles. We’ve tried so hard to be creative but this restriction has always been around. Fluid designs, Bootstrap and other frameworks look great but websites haven’t quite achieved box-shaped free designs like prints.

CSS Shape

With CSS Shape you can have non-box shaped element in HTML. I’m not talking about triangles or trapezoid made with border properties rather an actual shape that can have text wrapped around the element.

CSS Shape Example

CSS Markup

To use CSS Shapes, we first need our element to have width and the element has to float.
Markup for simple circle:

.circle {
    background: gray;
    width: 15em;
    height: 15em;
    float: left;
    shape-outside: circle();
    -webkit-clip-path: circle();
    clip-path: circle();
}

We use shape-ouside alongside with clip-path to do the trick here using same values for both properties.
List of available values:

  • circle()
  • ellipse()
  • inset(): This is for rectangular shapes. It also allow border edges.
  • polygon(): This is for creating any shape with more than 3 vertices.
  • url(): Yes! you can also shape based on images.
  • inherit and initial

If you want more margin between texts:

shape-margin: px | em | %
Polygon

When you use polygons you must have more than 3 vertices. Also if your beginning point and endpoint are different it closes itself.
To shape a simple star:

shape-outside: polygon(50% 0%, 61% 35%,
                       98% 35%, 68% 57%,
                       79% 91%, 50% 70%,
                       21% 91%, 32% 57%,
                       2% 35%, 39% 35%);
Image

When identifying an image, the image must have transparency. In other words, only the image formats that support transparency are allowed such as png, svg, and gif.

Browser Support

Browser supports are not quite as good as other specifications, though CSS Shapes Module 1 is under a Candidate Recommendation. Supoort in Microsoft Edge and Firefox are under consideration.
CSS Shape Browser Support