Multi-Shaped CSS Layers \ Non-rectangular CSS Layer

Question

is it possible to make CSS Layers shaped like the following image...

i know we can have images of this shape and with transparent backgrounds we can have Layers shaped like these... but no i want CSS Layers to actual borders like these shapes... is there a way CSS, jQuery or anything....

Note: by 'shapes like these i mean not just these three examples but shapes that i could define'

Answer 1

If you need shapes in HTML then you should embed or generate SVGs. You may want to take a look at Raphaël.

Normal HTML and CSS will just render rectangles.

Answer 2

There isn't a direct way to manipulate the shape of a DOM element -- all elements are either rectangular (if they're display:block;) or shaped by their text content (if they're display:inline;).

The HTML DOM revolves around rectangular boxes, so you're not going to get random shaped boxes using that.

It depends exactly what you're trying to do. If all you want to do is draw shapes, then you'd be better off using either canvas, SVG or VML, depending on exactly what you want to do and the browser support you need.

Canvas is an HTML5 technology which basically gives you a drawing pad in the browser which you can draw on with Javascript. It allows you to create and animate 2D pixel art.

SVG and VML are vector graphic languages. They perform roughly the same task, but VML is specific to Internet Explorer while most other browsers support SVG. (IE9 will support SVG as well, but it's not in widespread use yet). Again you can work with these using Javascript, and the best way to do it in a cross-browser way is to use the Raphael libraray, which gives you an API to create your graphics, and then translates it to VML or SVG behind the scenes according to the browser.

You could also, of course, just have a background graphic for your box in the shape you want with transparent areas outside the shape, and only use the area inside the box. It won't really be a polygonal box, but if you do it right it could look just as good.

If you really want to do it using CSS - maybe to have a box that other text elements will wrap around smoothly, you're going to struggle. There are a few hacks you can use to achieve these sorts of effects, but none of them are exactly what you're looking for.

One option may be CSS transforms: This allows you to rotate/skew/etc a box. The down sides are that the box remains box-shaped (so no polygons), and the contents are rotated and skewed as well as the box outline, so may not suit what you're trying to do. Also, it may not work on all browsers, though can be made to work in most cases.

It is possible to create boxes with fake diagonal edges by messing around with the border styles. See http://www.cssplay.co.uk/menu/tree.html for a good example. But again, it's not perfect.

Other than that, you'll just have to create multiple boxes and position them to get the closest match for the shape you're trying to achieve.

Hope that helps.

Answer 3

CSS is a language for styling documents, not giving them semantic structure. Ergo, there is not something known as a "css layer" or "css shape". Objects in your HTML documents, including divs which sometimes are erroneously referred to as "layers", can be given indexes of whether they display in front of or behind other objects, giving the illusion of "layers".

And no, there are no objects in and generic HTML documents that may have arbitrary shapes. You may sometimes hack on standard box shapes to do creative things by combining lots of little known shapes such as is done with the slants hack.

What you might be looking for is something like the new canvas element in HTML5 and the other vector graphic solutions such as SVG that have led up to it.

Answer 4

You can do the first shape (the parallelogram-type thing) in recent Safari, Chrome, Firefox and Opera via CSS transforms:

• http://webkit.org/blog/130/css-transforms/
• https://developer.mozilla.org/En/CSS/Using_CSS_transforms
• (www.opera.com is down at the moment, but you want http://www.opera.com/docs/specs/presto26/css/transforms/)
• http://hacks.mozilla.org/2009/06/3d-transforms-isocube/

Aside from that, no. CSS is all about rectangles.