html - HTMLとCSSを使ってL字型のボーダーを作成することは可能ですか?

Question

HTMLとCSSだけで、このようなL字型のボーダーを作ることはできますか？

編集：それは私が現時点で持っているものです：http://jsfiddle.net/cBwh8/

Edit2: 上の写真を複製しようとしています - 適切に湾曲した丸い角。これが私がここで問題を抱えている主な理由です: http://jsfiddle.net/cBwh8/1/

Answer 1

少しトリッキーですが、これを楽しんでいました

.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;}

とマークアップ

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

Answer 2

興味のある方のために、L 字型のフィールドセットのセットを次に示します。

JSFiddler コード

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 3

NECRO、実際にこの問題が発生したばかりで、これが最初に見つけた投稿だったので、他の誰かが問題を抱えてここに着陸した場合、または問題がまだ発生している場合に備えて、少し追加したいと思います. リンクした edit2 を使用して、「border-radius」を「border-bottom-right-radius」に変更すると、右下隅のみが丸くなるようになり、奇妙な丸みを帯びた/色あせたエッジが修正されます。

-moz-border-radius-bottomleft: 10px; のようなものを追加することもできます。-webkit-border-bottom-left-radius: 10px; 古いブラウザのサポートを強化したい場合。