css - CSS フルボーダートップ?

Question

私のは、その境界線とdivは異なるborder-top色をしています。leftright

例：

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