html - このような2つのコンテンツ領域の間にセパレータgifを追加するにはどうすればよいですか？

Question

つまり、本文には左のコンテンツと右のコンテンツの2つのコンテンツがあります。メニューパネルとしてコンテンツを右に配置し、それらの間にセパレータgif（羽の付いた縦線）を配置したいと思います。どうすればいいですか？cssコードとは何ですか？ありがとう。

Answer 1

簡単なコードで目的の結果を得ることができます：-

HTML

<div class="wrapper">
<div class="left">left-panel</div>     
<div class="right">right-panel</div>    
</div>  

CSS

.wrapper {
border:1px solid red;
overflow:hidden;
width:220px
}

.left {
float:left;
width:100px;
height:280px;  
background:grey; 
position:relative;
}

.left:after {
position:absolute;
content:" ";
width:1px; 
height:280px;
background-color: #FAFAFA;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#FAFAFA));
background: -moz-linear-gradient(top, #000000 0%, #FAFAFA 100%);  
right:-10px;
top:0;  
}
.right {
float:right;
width:100px;
height:280px;  
background:lightgrey;  
}

デモ

Answer 2

#vertical {
    border-left:thick solid #ffff00;
}

これはうまくいくはずです