CSS Shapes

The specification defines three new properties:

  • shape-outside — allows the definition of basic shapes
  • shape-image-threshold — Sets an opacity threshold value. If an image is being used to define the shape, only the parts of the image that are the same opacity or greater than the threshold value are used in the shape. Any other parts are ignored.
  • shape-margin — sets a margin around the defined shape

Basic Shapes:

  • inset()
  • circle()
  • ellipse()
  • polygon()

Using the value inset() wraps text around a rectangular shape however you are able to add offset values, thus pulling the line boxes of any wrapping content closer to the object than would otherwise happen.

We have already seen how circle() creates a circular shape. An ellipse() is essentially a squashed circle. If none of these simple shapes do the trick you can create  polygon() and make the shape as complex as you want.

Leave a comment

Your email address will not be published. Required fields are marked *