CSS Wish List – Div Shapes

CSS Wish List – Div Shapes

Effects are cool, but come on, it could do more

Note: Comments have been disabled on this article due to an INSANE amount of spam ping comments. Must have been my title or something.

We can all agree that CSS3 added some really cool stuff. Linear gradients alone made it worthwhile for me. Add in border-radius, box/text-shadow, transitions (available in FF 4 if you didn’t know yet) and whatever else I’m forgetting to mention, and you have a pretty good upgrade to CSS. Today though, while working on a site, I was frustrated by something that CSS can’t do. I Google’d the hell out of it, and I couldn’t even get the right topic to come up. It made me stop and think that, ya all those cool effects are great, but there are some things I would like it to do beyond that.

Plotting Div Points

I didn’t think of it until today. I work within a custom content management system that feeds default content into specific sections on the site. I want the main content block, I call a specific ‘id’ on a div, and boom, it throws in some default content pertaining to whatever market I am building for. The problem though, is I can’t put a div/image/whatever into that content block, until after the site is ordered. Not a problem if I am building a custom site, because I have the ability to change that content. If I am building a template site though, I don’t have that ability because it has to fit any number of clients. What I needed today, was to wrap text around another div. See the image below and you will see what I mean.

CSS Demands image

NOTE: I think I am going to build this and sell the template here, so if you are interested, contact me!

Easy stuff normally right? I’d put the div in the content wrapper, and float it right, then everything wraps around it. Done. Not in my case though, where I can’t inject further code into the default content. What I WANT CSS to be able to do, is allow me to plot the points of a div. In other words, I want to be able to control the shape of the div. The picture below shows what I want the div to look like.

CSS Demands image 2

What would the CSS look like?

Now that you see the basic shape I was looking for, what would the CSS look like for something like that? Well, here is a crack at that:

.mainContent {
border-points: 0 0, 0 200, 200 200, 200 400, 400 400, 400 0, 0 0;

What would all that mean though? Each two number set would plot a point for the div, so if you always start at the top left most corner, (top: 0, left: 0) you would tell the CSS where to plot each following points. In this case, the second point would be at 0px from the top, and 200 left of the starting point. The next would be 200 from the top, and 200 left. Then 200 from the top, and 400 left. And so forth until you completed the div again at 0 0.

But what if you wanted a circle?

.mainContent {
shape: circle;
shape-size: 200px;

Where is my flying car?

Obviously I’m coming up with the ridiculous CSS crap off the top of my head, but I think you understand what I am talking about. To me this is like the question “Why don’t we have flying cars yet?” CSS has been around a while, I would think it should be able to do some things like this. I don’t think it would cause to many issues with layout, that floats and proper math couldn’t handle. Now that you have read this, what do you think? Am I insane for expecting or wanting such a thing? Can you see a use for it? Seriously, imagine getting HTML text to wrap inside a circle or triangle shape? Some cool stuff could be done.

Do you have any CSS wish list items? Let me know, or tell me my idea is good or crap. Let’s talk!

Coupon Code: webmachine

jQuery junkBox

This method will get the height for the first element in the set of matched elements (including padding, but NOT border). Below it would get the first div’s height in all that was matched (so height+padding = height returned).

$('.myClass div').innerHeight;


2 Responses to “CSS Wish List – Div Shapes”

  1. Interesting concept. Your border points function might be better named “linedraw”, or “plot”, because that’s essentially what it is.

    I haven’t worked with CMS’s extensively enough to understand why you can’t use the float.

    • jcDesigns says:

      I was dealing with a custom CMS, this is not a typical thing. This CMS is meant to work on template sites, where say 100 sites pull default content from the same file. If I change it for one, it changes for all. Can’t have that. So imagine you write the html for the div, but you have no control of what html goes in it. That is basically what I had. Without the option of adding a floated div the text would wrap around, this is what I thought of…actually controlling the shape of the div.

      Again, not saying plotting the div points is a brilliant idea, but it is something I can see being of some use.