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

here is my link,,http://jsfiddle.net/sanand29/7j05ee75/1/<div id="rectangle"><div class="input-container_border-red"></div> <div class="input-container_border-gray"></div></div>

这是我的链接,, http://jsfiddle.net/sanand29/7j05ee75/1/

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

I want to show only right vertical border in two colors i.e half in red and half in grey.. please help

我想只用两种颜色显示正确的垂直边框,一半是红色,一半是灰色..请帮忙

1 个解决方案

#1

Try this:

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

Working Fiddle