CODEWITHSUNDEEP
csshtml
user945620
user945620

Reputation:

How to create a non-rectangular DIV in HTML and CSS?

I need to create a DIV that is not rectangular, but is rather like two rectangles side by side. I can't use two DIVs for this purpose however, because there needs to be a continuous border around all of them and all corners need to be rounded. So... is there a way to create either a non-rectangular DIV, or to use a table for this purpose?

Thanks.

It should look like this:

+---------------+
|               |
|               |
+-----------+   |
            |   |
            +---+

The + signs are rounded corners.

Upvotes: 6

Views: 3740

Answers (2)

Andreas Eriksson
Andreas Eriksson

Reputation: 9027

Something like this? http://jsfiddle.net/eW9kR/1/

Please do tell me if this isn't what you're going for, and i'll do my best to help.

Edit: Having seen your better description, i came up with this solution: http://jsfiddle.net/dPLDr/1/

Basically, you first create a wrapper, div.wrap to hold the other divs. In that, you then place your two divs.

<div class="wrap">
    <div class="big"> </div>
    <div class="small"> </div>
</div>

You then set a width on the wrapper.

div.wrap { width: 300px; }

This makes sure that the divs contained within will expand to 300 px unless told not to.

We set a background and border on our contained divs ..

div.big, div.small { background-color: #F00; border: 1px solid #000; }

You can then set whatever height you want on the big element, and a width and height on the smaller element. Then, you need to position your smaller div where it needs to be, i chose to float it to the right based on your illustration.

And now comes the magic: In order to give the impression of a continous border, i remove the top border from the small element, and position it -1px relative to its original position on the Y axis. That way, it overlaps the big divs border, obscuring it.

div.small { border-top: none; position:relative; top: -1px; }

Finally, you set the appropriate border-radii. et voila.

However, the top left corner of the smaller div is problematic, since it needs to be rounded away from the div in question. I attemped to make a workaround, but couldn't get it to look well with only CSS and HTML.

As a pointer in the right direction though, make a 5px x 5px PNG that looks like said rounded border should, place it in the smaller div, and position it -6px relative on the x axis.

Good luck!

Upvotes: 4

tyron
tyron

Reputation: 3865

You can use 2 DIVs inside a container DIV.

You would come up with something like this: http://jsfiddle.net/tyrons/tjdwA/

The HTML is simple:

<div id="outer" class="outer">
    <div id="inner1" class="inner">This is the first div</div>
    <div id="inner2" class="inner">This is the last div</div>
</div>

And so is the CSS:

.outer {
   border: 5px solid blue;
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   -khtml-border-radius: 20px;
    border-radius: 20px;
    float:left;
    padding: 10px;
}

.inner {
    border: 1px dashed red; 
    width: 200px;
    float:left; 
 }

Upvotes: 1

Related Questions