CSS Full Border top?

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