CSS完整邊框頂部？

我的div有不同的border-top顏色比它的left和right邊框。CSS完整邊框頂部？

實施例：

div{ 
    width: 100px; height: 100px; 
    border-top: blue 20px solid; 
    border-left: red 20px solid; 
    border-right: red 20px solid; 
}

但邊界的角部成爲tringle形如下所示在左圖像：

CSS Border Problem

我希望border-top跨越整個寬度像右上圖。

解決此問題的任何詭計？

感謝

來源

2013-03-16 hrsetyono

http://stackoverflow.com/questions/13459985/border-角落 - 三角形 – gmartellino 2013-03-16 08:57:38

[設置css邊框以90度而不是45度角結束]（h ttp：//stackoverflow.com/questions/7261703/set-css-border-to-end-in-a-90-instead-of-a-45-degree-angle） – 2013-03-16 08:58:27

謝謝，我喜歡那個使用' ::之後和之前:: – hrsetyono 2013-03-16 09:09:16

這將戈夫你所期望的結果：

HTML

<div id="a"><div id="b"></div></div>

CSS

div#a { 
    border-top: blue 20px solid; 
    width: 140px; 
} 
div#b { 
    height: 100px; 
    border-left: red 20px solid; 
    border-right: red 20px solid; 
}

來源

2013-03-16 09:01:59 aorcsik

感謝它的工作。但我更喜歡[這個技巧]（http://stackoverflow.com/a/13460111/1318622）。 – hrsetyono 2013-03-16 09:11:16

CSS完整邊框頂部？

回答

相關問題