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.