html - css区切り線の問題

Question

CSSのみを使用して、以下の画像のような区切り線を作成しようとしています。私はこれを多くのウェブサイトで見てきましたが、非常に簡単にできるようです。これを達成するための最良の方法は何ですか？

Answer 1

これが最善の方法かどうかはわかりません。

HTML:

<div class='seperator'>
   <div class='redSep'></div>
   <div class='graySep'> </div>
</div>

CSS:

.seperator{
   width:100%;
   height:20px;
}
.redSep{
   width:30px;
   left:0;
   float:left;
   height:4px;
   background-color: #ff3322;
   z-index:2;
   position:relative;
   margin-right:-30px;
   top:0px;
}
.graySep{
   width:100%;
   top:1px;
   float:left;
   position:relative;
   z-index:1;
   left:0;
   height:2px;
   background-color:#eee;
}

http://jsfiddle.net/jdRXG/1/

Answer 2

私はあなたの質問を理解したと思います、これを試してみてください：

<div id="lineWrap">
<span id="center"></span>
<span id="outer"></span>
</div><!--lineWrap-->

div#lineWrap {position:relative; height:3px;}
div#lineWrap span {position:absolute; left:0px; display:block;}
div#lineWrap span#center {top:1px; height:1px; background:#999; width:400px;}
div#lineWrap span#outer {top:0px; height:3px; background:#fd6e6e;width:40px;}

こちら >>> http://jsfiddle.net/RHf9L/

Answer 3

このフィドルを参照してください: http://jsfiddle.net/QUvU7/

:after 擬似セレクターを使用して、実際に次のように追加することなく、dom 要素を「偽装」することができます。

.top:after{
    content: "";
    margin-top: 15px;
    display: block;
    border-bottom: 1px solid black;
}