html - 下部に複数の境界線を追加するには?

Question

添付画像のように見えるように、div に 2 つの余分な下の境界線を追加したい:

そのために空の div を 2 つ追加する必要がありますか? 私は非常に基本的なマークアップを持っています:

<div class="box">
    main div
</div>

基本的なデモは次のとおりです: http://jsfiddle.net/3TWtF/

Answer 1

<div/>はい、次のように 2 つの s を追加する必要があります: http://jsfiddle.net/UUDd3/これにより、最も互換性のあるソリューションが提供されます。

次の HTML を追加します。

<div class="box2">
    &nbsp;
</div>
<div class="box3">
    &nbsp;
</div>

そして、次の CSS:

.box2{
    border-left: 1px solid brown; 
    border-bottom: 1px solid brown; 
    border-right: 1px solid brown; 
    width: 480px;
    height: 10px;
    margin:0 10px;
}
.box3{
    border-left: 1px solid brown; 
    border-bottom: 1px solid brown; 
    border-right: 1px solid brown; 
    width: 460px;
    height: 10px;
    margin:0 20px;
}

Answer 2

2 つの余分なdivs なしで実行できますが、疑似要素を使用する必要があるため、IE7 のサポートを削除する必要があります。

jsフィドル

.box{
    border: 1px solid brown; 
    width: 500px;
    height: 100px;
    position:relative;
}
.box:after {
    display:block;
    content:"";
    position:absolute;
    border:1px solid brown;
    width:400px;
    left:50px;
    top:100px;
    height:15px;
}
.box:before {
    display:block;
    content:"";
    position:absolute;
    border:1px solid brown;
    width:300px;
    left:100px;
    top:116px;
    height:15px;
}