css - CSS 全边框顶部？

Question

我的颜色与其和边框div不同。border-topleftright

例子：

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

但是边框的角变成了三角形，如下左图所示：

我希望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;
}