Breadcrumbs

[mikethedj4]

See It In Action: https://mikethedj4.github.io/kodeWeave/ ... a16f6bcd93

You can wrap pieces of text around shapes using shape-outside. As of CSS3, this property only works on elements that have the property of float applied upon it.

Example:

Code: Select all

#element {
  float: left;
  shape-outside: circle(50%);
  width: 100px;
  height: 100px;
}

This is the visual equivalent of the above snippet:


Other functions instead of circle() include:
ellipse(), polygon(), inset().

Browser Support: (at time of posting)

Desktop:
Feature: Basic support
Chrome: 37
Firefox (Gecko): No support
Internet Explorer: No support
Opera: 24
Safari (Webkit): 8.0 -webkit

Mobile:
Feature: Basic support
Android: No support
Firefox (Gecko): No support
IE Phone: No support
Opera Mobile: 24
Safari Mobile: 8.0 -webkit

See Mozilla Developer Network for more information and browser support: https://developer.mozilla.org/en-US/doc ... pe-outside

If you liked this article you may also want to checkout Getting Started with CSS Shapes, Clipping in CSS, and Working with Shapes in Web Design.