如何使用html/css和半彩色边框在矩形中只显示垂直的侧栏

Question

这是我的链接，，http://jsfiddle.net/sanand29/7j05ee75/1/<div id="rectangle"><div class="input-container_border-red"></div> <div class="input-container_border-gray"></div></div>

#rectangle {
width:20%;
height:60%;
position:fixed;
top:0;
left:0;
border:1px solid #000;}.input-container_border-red {
position: absolute;
left: 0;
bottom: 4%;
width: 50%;
height: 2px;
background-color: red;}.input-container_border-gray {
position: absolute;
right: 0;
bottom: 4%;
width: 50%;
height: 2px;
background-color: gray;}

我想只显示两种颜色的右垂直边框，即一半是红色，一半是灰色。。请帮助

Answer 1

试试这个：

CSS

#rectangle {
    width:20%;
    height:60%;
    position:fixed;
    top:0;
    left:0;
    border:1px solid #000;
    border-right: none;
}
#rectangle:after, #rectangle:before {
    content:"";
    position: absolute;
    right: 0px;
    width: 1px;
}
#rectangle:after {
    top: 0px;
    bottom: 50%;
    background-color: red;
}
#rectangle:before {
    top: 50%;
    bottom: 0px;
    background-color: grey;
}

工作Fiddle