html - 边 Angular : Triangle

Question

是否有可能摆脱边框 Angular 落的“三 Angular 形”形状？ (当使用不同颜色的边框时)

看这个例子:

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 Fiddle demo .

或者使用嵌套的 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 Fiddle demo .

还有一个单嵌套元素方案，左边和右边，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 Fiddle demo .