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

这是我的链接，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;}

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

最佳答案

尝试这个：

的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

关于html - 如何仅使用html/css和半彩色边框在矩形中显示垂直边栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25925104/