Examples

Not Just Rectangles Anymore

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website. Get to it!

Tested in Internet Explorer 6+, Firefox, Safari, Opera, and Netscape.

Instructions
  1. Add points to the black lines by clicking anywhere on the line.
  2. Drag the points into place to adjust the line/curve.
  3. Add as many points as required to get desired shape.
  4. Use one of the three methods at the bottom of the page to export your wrap to your site.
  5. If you want to trace an image, enter the image's URL in the optional values above.
Subscribe to the Idea Shower for More Ideas

Options

Workarea Options
  • px
  • px
  • px
Preview Options
Content

Apply the wrap shape to your site: Choose one of 3 ways

I've provided three different ways to apply the wrapping shape to your site. Each has it's benefits/drawbacks, but with these three you should be able to find a method that suits you.

Method 1: Inline CSS/XHTML

This is the fully generated HTML/CSS code. It's really bulky, but it's the easiest to apply.

One Step:

1. Copy and Paste this code into your site, right above the start of your text content.

Method 2: XHTML w/ Classes

This is the fully generated HTML with class names. Smaller markup, but you will need to have a stylesheet for this to work.

Two Steps:

1. Copy and Paste this code into your site, right above the start of your text content.

2. Copy and Paste the text below into your site's stylesheet.

Method 3: Javascript

The most lightweight, applies two lines of javascript to generate the wrap markup. Requires loading of single small external javascript.

Two Steps

1. Copy and Paste this code into your site, right above the start of your text content.

2. Save and then upload this javascript onto your site.
Download: shapewrapper.js

After You've Tried It...

Let use know what you think, or share with us what you've made on the CSS Text Wrapper Project page on the Idea Shower.