Keep text inside CSS shape without using blank divs

2
votes

This article shows several shapes that can be created in CSS. The square the the rectangle easily support adding text inside the shape. The oval and circle cuts the text out. The triangle doesn't show any text. The heart shows the text behind it. And because text was added the diamond doesn't appear to be a diamond anymore.

Is there any decent way for one to go about adding text to these CSS Shapes? Is there something easier than using floating divs to position the text in a separate element onto of the CSS Shape element?

Example of some results: http://jsfiddle.net/EVBYt/

1
cssshapes

1 Answers

2
votes
  • CSS shapes,
  • text in a safe zone in a CSS shape and
  • text in CSS shapes where text will fill available space as much as possible

are three very different beasts!

The shapes you refer to are made with one constraint: a single element is used. This leads in some cases to 0x0 px elements with background-color entirely applied onto pseudo-elements. Obviously your text won't display properly in these cases and you'll have to redo entirely these shapes with other methods.

CSS regions has been proposed by Adobe to W3C. Just wait a few years for standardisation and implementation :)

During this long wait, Tantek Celik and Eric Meyer who played with blank divs ~10 years ago (example: http://meyerweb.com/eric/css/edge/curvelicious/demo.html ) are still relevant.
Provided you want to achieve designs that will explode when larger text is selected by users in IE8 or with a single level of zoom text in Firefox. Though with fluid sizing in em maybe?

I'd use SVG if I was forced to style text into such complicated shapes.