邊框角落：三角形

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。