Dynamic shaped div in HTML

Question

Can I make a div with a custom shape? I mean, I have a rectangular div by default, and a few shapes can be obtained by exploiting the border-radius property of the div, but what I am looking for is a semi-leaf shaped element, something like this:

The picture isn't all that great, but that's what I am looking for. The elements in the div should be placed in this shape. How do I attain such functionality?

I am not just looking for just a shape, but an element which is shaped this way which could hold more elements.

The major issue I am facing if I use border-radius as the solution is that, I have floated images inside this div, now if I use border-radius, it is either clipped as in Firefox or overflows out of its border as in WebKit browsers. How do I get this content to strictly be inside the shaped div?

Answer 1

Regarding the shape of the div, you can achieve that by tweaking the radii of the border angles using the CSS border-radius property:

width:25px;
height:200px;
background-color:#333;
border-top-left-radius:50px 200px;
border-bottom-left-radius:50px 200px;
-moz-border-radius-topleft:50px 200px;
-moz-border-radius-bottomleft:50px 200px;

Easy working solid div demo: http://jsfiddle.net/AlienWebguy/83scc/1/

Doing it with just a border on a single div will NOT render well on a Mac - for example, if you just have a white background and a black border, the border will "cut out" and then "re-appear" due to the poor calculations of the Bézier curves and fill-ins. With just a background color (in the demo) it looks great. You could easily double up your divs, one white, and one 1 pixel larger black which sits underneath it, like so:

Working outline example: http://jsfiddle.net/AlienWebguy/83scc/3/

As far as the contents of the div, they won't naturally be positioned in such a way to compliment this shape, so you'll need to give them absolute positioning and give the parent an overflow:hidden; property.

Answer 2

Short answer: no. A div can't do that for you. At least, not across all browsers. It is, and always will be, a rectangular element at heart (even with rounded corners).

If you want to draw something like that, you can use the cool new canvas tag and whip up some javascript magic. If you're looking for something that will actually hold things correctly (with padding and all that), then take a look at this: Polygonal Divs -- Making content overflow in a specific shape?

I asked the same question a while ago in a slightly different format. It has some good answers.

Answer 3

You can use percentages, to make it adjust to different sizes ;)

Try resizing this (in a browser that supports CSS resize) http://jsfiddle.net/leaverou/XHbhr/1/ and observe how it changes to match its dimensions with no JavaScript whatsoever :)