Zrób element z obramowaniem, "sztyftem" na zewnętrznych obrzeżach obiektów wewnątrz

Question

Jaki jest sposób utworzenia elementu div (lub innego elementu) z obramowaniem, "sztyftem" na zewnętrznych granicach obiektów wewnątrz tego elementu div?

Na przykład:

Answer 1

Jeśli chcesz to zrobić tylko z CSS i bez javascript plugin, można zrobić to z dużo pracy, jak następujący przykład: Demo

HTML

<div id="main"> 
    <div class="red"><div class="content">Red</div></div> 
    <div class="green"><div class="content">Green</div></div> 
    <div class="blue"><div class="content">Blue</div></div> 
    <div class="black"><div class="content">Black</div></div> 
</div> 

CSS

#main {position:relative;} 
.black, .red, .blue, .green { 
    position:absolute; 
    border:3px dotted #000; 
    background:#FFF; 
    z-index:10; 
} 
.content {position:relative;margin:10px;} 
.black {top:300px;left:103px;z-index:9;} 
.black .content {height:180px;width:280px;background:#000;} 
.blue{ top:50px;left:200px;border-bottom:none;} 
.blue .content {height:30px;width:30px;background:#009;} 
.red{top:0px;left:0px;} 
.red .content {height:280px;width:80px;background:#F00;} 
.green{top:100px;left:103px;border-left:none;border-bottom:none;} 
.green .content{height:180px;width:180px;background:#070;} 

Tutaj należy ustawić położenie każdego elementu i jego rozmiarów, następnie należy dostosować dla każdego wyświetlania każdej nałożonej granicy.

To trochę brzydki, ale działa ...