边框角落：三角形

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 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。

Answer 2

这就是边界的工作原理。浏览器如何决定哪些角落与其他角落重叠？

你可以使用嵌套的DIV来实现这个效果，或者在一些绝对定位中使用：before和：after。

Answer 3

不是到处用一个单一的元素。 （实际上，边界的默认三角形是什么使伟大的事情成为可能：The Shapes of CSS）

但是，你要求的东西很容易在任何地方与另一个子元素。

CSS：

.borders { 
    width: 520px; 
    height: 500px; 
    border-top: 10px solid red; 
    border-bottom: 10px solid green; 
} 

.borders2 { 
    background: #efefef; 
    width: 500px; 
    height: 500px;  
    border-left: 10px solid black; 
    border-right: 10px solid black; 
} 

HTML：

<div class="borders"> 
    <div class="borders2"> 
    </div> 
</div>​ 

有了这些值，外DIV的边界框后，仍然有尺寸的520×520像素。请参阅this fiddle。