边界角:三角形

Question

是否有可能摆脱边角的"三角"形状？(使用不同颜色的边框时)

看这个例子:

http://jsfiddle.net/GLsqV/

任何解决方法？基本上我只想让顶部和底部边框继续,而不是混合使用它们.

 .borders {  
   width:500px;
   height:500px;
   background:#efefef;
   border:10px solid black;
   border-top:10px solid red;
   border-bottom:10px solid green;
 }?

Answer 1

使用生成内容的一个选项:

.borders {
    width:500px;
    height:500px;
    position: relative;
    background:#efefef;
    border-top:10px solid red;
    border-bottom:10px solid green;
}

.borders::before,
.borders::after {
    content: '';
    position: absolute;
    width: 10px;
    top: 0;
    bottom: 0;
    background-color: #000;
}

.borders::before {
    left: 0;
}

.borders::after {
    right: 0;
}

JS小提琴演示.

或者使用嵌套HTML(如果你真的必须):

<div class="borders">
    <div class="innerBorder left"></div>
    <div class="innerBorder right"></div>
</div>?

.borders {
    width:500px;
    height:500px;
    position: relative;
    background:#efefef;
    border-top:10px solid red;
    border-bottom:10px solid green;
}

.borders .innerBorder{
    content: '';
    position: absolute;
    width: 10px;
    top: 0;
    bottom: 0;
    background-color: #000;
}

.borders .left {
    left: 0;
}

.borders .right {
    right: 0;
}

JS小提琴演示.

还有一个单嵌套元素解决方案,其中左边和右边border-color是background-color包装元素,宽度由margin后代控制:

<div class="borders">
    <div class="inner"></div>
</div>?

CSS:

.borders {
    width:500px;
    height:500px;
    background-color: #000;
    border-top:10px solid red;
    border-bottom:10px solid green;
}

.borders .inner {
    background-color: #efefef;
    height: 100%;
    margin: 0 10px;
}

JS小提琴演示.