CSS Full Border顶级？

Question

我的div与border-top和left边框的颜色不同right。

示例：

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

但是边框的角落变成了tringle形状，如左图所示：

我希望border-top跨越整个宽度，就像上面的右图所示。

解决这个问题的任何技巧？

由于

Answer 1

这会给你想要的结果：

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;
}