Using Shape-Outside To Wrap Text Around A Shape

1 post Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

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:
Image

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.
You do not have the required permissions to view the files attached to this post.
1 post Page 1 of 1
Return to “Tutorials”