Diagonal ‘steps’ text boxes and other unusual shapes with CSS

Creating unusually shaped text boxes can be a cause of stress for designers. It’s not something that’s particularly easy to pull off, and the simpler solutions like floating text around objects or using CSS shapes have their limitations / browser compatibility issues.

I recently came across a tool that makes diagonal text and other unusual shapes much, much easier: It’s called ‘CSS Text Wrapper‘ and it does the grunt work for you. Here’s how to use it…

CSS Text Wrapper Tutorial

Header over to www.csstextwrap.com. You’ll find a dummy text box with draggable lines on each side.

text-wrapper-one
  • Google+
  • Facebook
  • Twitter

Drag the lines to force the text into any shape you like. Just click anywhere on either line to add more adjustment points.

text-wrapper-two
  • Google+
  • Facebook
  • Twitter

When you’re done, click the red ‘I’m done’ box above the editor. and scroll down to see the generated HTML and CSS.

The tool offers three ways to get the code to work for you. In my test, the easier option was Method 2: XHTML w/ Classes.

  1. Take the HTML code from the first of the two boxes and select and copy it all. Switch to the ‘Text’ tab of your text editor, NOT the ‘visual’ tab and add the code above the area of text you would like to effect.
  2. Add the CSS from the second box to your child theme CSS style sheet or theme options CSS panel.
  3. Enjoy!

It’ll work in the standard WordPress text editor and in text modules too, as long as you add the code to the ‘text’ tab and apply the CSS. Happy days.

 

 

Cory Jenkins

I am a an Avid WordPress User/Developer/Blogger and Co-Founder of Aspen Grove Studios. When I am not designing awesome stuff, I enjoy hanging out with my family, watching baseball and exploring the great outdoors.

Previous post
Next post

1 Comment

  1. Francesco

    Thanks this guide is very helpful.
    Do you have a tutorial how to use svg polygons to create beautiful divi shapes in divi?
    I try so many times but there’re always padding and margin gap that break the results.

    Reply

Submit a Comment

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

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match