Creating interlocking, irregular borders with CSS
Question
I have a layout made up of 4 "interlocking" divs, like so:
-------**********
- -* *
- -* *
- -* *
------- *
++++++ * *
+ + * *
+ + **********
+ + ^^^^^^^^^^
+ + ^ ^
+ + ^ ^
+ + ^ ^
+ + ^ ^
++++++ ^^^^^^^^^^
I want to put borders around the "top" and "bottom" bits, to have the final layout look like:
-------**********
- *
- *
- *
------- *
++++++ * *
+ + * *
+ + **********
+ +^^^^^^^^^^^
+ ^
+ ^
+ ^
+ ^
++++++^^^^^^^^^^^
(Where two divs used to meet should be a smooth border that looks like one unified shape)
How should I do this properly in CSS?
Solution
Here's my solution. It uses floats with a negative margin and fakes the no-border part by setting the border to the background color of the div.
.w {width:223px;}
.box {float:left;height:100px;width:100px;border:1px solid #000;margin-bottom:10px;}
.tall {height: 300px;}
.wide {width:120px;}
.right {position:relative;z-index:1;float:right;margin-left:-1px;}
.no_rb {border-right:1px solid #fff;position:relative;z-index:10;}
.no_lb {border-left:1px solid #fff;position:relative;z-index:10;}
<div class="w">
<div class="box wide no_rb"></div>
<div class="box tall right"></div>
<div class="box tall"></div>
<div class="box right wide no_lb"></div>
</div>
OTHER TIPS
You can do this 1px borders and 1px overlapping of absolute positioned divs. have the smaller of the divs for a given intersect have no border, and make it overlap the border of the larger div.
Edit: Also, the smaller div should have a higher z-index so it rests on top.
It's just a matter of playing a bit with borders, padding and relative positioning. See this example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>DIVs</title>
<style type="text/css">
body, html {
background: #eee;
}
div.box {
background: #fff;
border-style: solid;
border-width: 2px;
position: relative;
width: 100px;
z-index: 1;
}
div.group {
float: left;
}
#box-1, #box-4 {
z-index: 2;
}
#box-1 {
border-color: #f00;
border-bottom: 0;
border-right: 0;
padding-right: 2px;
}
#box-2 {
border-color: #f0f;
}
#box-3 {
border-color: #0f0;
}
#box-4 {
border-color: #00f;
border-left: 0;
border-top: 0;
padding-left: 2px;
}
#group-2 {
left: -2px;
position: relative;
}
</style>
</head>
<body>
<div class="group" id="group-1">
<div class="box" id="box-1">one<br />one<br />one<br />one</div>
<div class="box" id="box-2">two<br />two<br />two<br />two<br />two<br />
two</div>
</div>
<div class="group" id="group-2">
<div class="box" id="box-3">three<br />three<br />three<br />three<br />
three<br />three</div>
<div class="box" id="box-4">four<br />four<br />four</div>
</div>
</body>
</html>
Try this one out. Using floats, negative margins and z-index only.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Interlock test</title>
<style>
div { width:150px; border:1px solid #000; background:#fff; position:relative; margin-bottom:5px; float:left; }
.container { width:309px; border:none; }
.tallTop, .tallBottom { height:400px; z-index:1; }
.tallTop { float:right; }
.shortTop, .shortBottom { height:200px; z-index:2; width:157px; }
.shortTop { margin-right:-1px; border-right:none; }
.shortBottom { margin-left:-1px; border-left:none; float:right; }
</style>
</head>
<body>
<div class="container">
<div class="shortTop"></div>
<div class="tallTop"></div>
<div class="tallBottom"></div>
<div class="shortBottom"></div>
</div>
</body>
</html>
What you're asking for is not possible in any cross-browser compatible way using CSS alone. You'd need to definitely use JavaScript for this.