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完整边框顶部？

回答

相关问题