Creare un bordo a forma di L usando HTML e CSS, è possibile?

Question

E 'possibile creare un bordo a forma di L come questo usando solo HTML e CSS?

Edit: Questo è ciò che ho in questo momento: http://jsfiddle.net/cBwh8/

Edit2: Sto cercando di replicare l'immagine qui sopra - opportunamente angoli arrotondati curvi. Questo è il motivo principale per cui ho difficoltà qui: http://jsfiddle.net/cBwh8/1/

Answer 1

Prova questo: ha lavorato per me

div.outer { 
    margin: 10px; 
    width: 200px; 
    height: 200px; 
    border: 1px solid blue; 
    border-radius: 10px; 
} 

div.inner { 
    width: 160px; 
    height: 160px; 
    border-right: 1px solid blue; 
    border-bottom: 1px solid blue; 
    margin-top:-1px; 
    margin-left:-1px; 
    background:#FFF; 
} 

Answer 2

Sì.

http://jsfiddle.net/HwKGx/1/

<div id="one"> 
    <div id="two">&nbsp;</div> 
</div> 

#one { 
    margin:10px; 
    width:45px; 
    height:75px; 
    border:2px solid #333; } 
#two{ 
    float:left; 
    width:35px; 
    height:65px; 
    border-width:2px; 
    border-style:solid; 
    margin:-2px 0 0 -2px; 
    border-color:#FFF #333 #333 #FFF; 
}​ 

Answer 3

po 'difficile, ma era divertente fare questo

.left{float:left} 
.right{float:right} 
#container{border-right:1px solid #000;border-bottom:1px solid #000;width:300px;height:300px;margin:100px auto;} 
#leftBox{width:70%;height:69%;border-right:1px solid #000;border-bottom:1px solid #000;} 
#leftBox2{border-left:1px solid #000;width:100%;height:29%;} 
#rightBox{width:29%;height:70%;border-top:1px solid #000;} 

e il mark up

<div id="container"> 
<div id="leftBox" class="left"></div> 
<div id="rightBox" class="right"></div> 
<div id="leftBox2" class="left"></div> 

Answer 4

Un leggermente più complessa, ma utile opzione:

http://dabblet.com/gist/2884899

Questo è due elementi di pari, assolutamente, e posizionato relativamente, z-indicizzato overflow sovrapposte. il div più in alto nasconde il topbad del bottom div.

Questo è molto utile per i menu a discesa.(Per avere una casella bordata, espandere con un menu contestuale)

EDIT (codice incollato da link):

HTML:

<div class="holder"> 
    <div class="top"></div> 
    <div class="bottom"></div> 
</div> 

css:

.holder{  
    position:relative; 
} 

.top{ 
    width: 50px; 
    height:50px; 
    background:red; 
    border:blue solid 2px; 
    border-bottom:none; 
    position:relative; 
    z-index:4; 
} 

.bottom{ 
    z-index:2; 
    width: 100px; 
    height: 100px; 
    position:absolute; 
    top:50px; 
    left:0; 
    border: blue solid 2px; 
    background:red; 

}

Answer 5

Per chiunque sia interessato, ecco un set a forma di L di fieldsets:

JSFiddler code

HTML:

<div> 
     <fieldset class="topPortion"> 
      <legend>Some legend</legend> 
      <input type="text" value="Foo" /> 
      <input type="submit" value="Submit" /> 
     </fieldset> 
     <fieldset class="bottomPortion">   
      <input type="text" value="Foo" /> 
      <input type="submit" value="Submit" /> 
     </fieldset> 
    </div> 

CSS:

fieldset.topPortion 
{ 
border: 1px solid red; 
border-bottom: 0; 
/*top: 20px;*/ 
padding: 5px 5px; 
position: relative; 
width: 250px; 
z-index: 100; 
background-color: yellow; 
top: 1px; 
border-radius: 5px 5px 0 0; 
} 

fieldset.bottomPortion 
{ 
border: 1px solid red; 
width: 500px; 
height: 100px; 
position: absolute; 
z-index: 1; 
margin-top: -10; 
padding: 5px 10px; 
background-color: yellow; 
border-radius: 0 5px 5px 5px; 
} 

Answer 6

NECRO, in realtà ho appena avuto questo problema e questo è stato il primo post che ho trovato, quindi mi piacerebbe aggiungere ad essa un po ', in caso qualcuno terre altro qui con il problema o se il problema è ancora in corso. Usando il edit2 che hai collegato, cambia "border-radius" con "border-bottom-right-radius" questo fa sì che solo l'angolo in basso a destra finisca per essere arrotondato, fissando così i bizzarri bordi arrotondati/sbiaditi.

È inoltre possibile aggiungere cose come -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; Se vuoi dare più supporto ai browser più vecchi.