Как понять логику растягивания border-width?

Question

[Drovosek01]

Разбираю пример с ленточками на чистом css, стал непонятен 1 момент.

Вывел то, что непонятно в отдельный pen https://codepen.io/Drovosek/pen/gERmKW .



В коде задан border-color так, что только верхняя часть границы будет черной, остальные 3 границы будут прозрачные, значит должен получиться перевернутый черный треугольник.
Еще задана ширина верхней и левой границы в 20 пикселей (т.к. border не может быть трапецией, то и противоположные стороны должны были принять такой же размер, почему нет?) и за счет этого перевернутый черный треугольник увеличился по высоте и обрезался на половину.

Если выставить border-width: 20px 20px 20px 20px; то треугольник будет отображаться "логически правильно" относительно border-color.

Почему так происходит?

Comments

[Lynn «Кофеман»]

> противоположные стороны должны были принять такой же размер

С чего бы? У вас явно указаны размеры всех 4 сторон

[Drovosek01]

Алексей Тен, почему тогда, если всем границам выставить толщину по 20px, то их размер в Chrome "дебаггере" отображается в 20px, хотя на самом деле он 40px?

[Lynn «Кофеман»]

20 слева плбс 20 справа равно 40. В чём проблема? В дебаггере как раз написано, что со всех сторон по 20

[Drovosek01]

Алексей Тен, аааааа... все понял. Я почему-то подумал, что то, что написано в дебаггере это высота/длина границы :\

Answer 1

[Eugene Chefranov]

А вы разукрасте стороны и потом изменяйте толщины и вы сразу поймете. Толщина изменяется не от центра стыка, а от края, потому и обрезается перевернутый треугольник.

border-color:  black red blue green;
border-width: 20px 20px 20px 20px;

Comments

[Drovosek01]

Блин, тогда это получается квадрат 40x40 px и соответственно, если логически рассуждать, то каждая граница тоже по 40px, но они отображаются по 20.

Все равно не понимаю почему так ((

[Eugene Chefranov]

Drovosek01, почеме каждая граница должна быть по 40? Вы к примеру задали по 20px с двух противоположных сторон и получается одна сторона 20px плюс вторая 20px равно 40px. Вроде все логично

[Drovosek01]

Eugene Chefranov, так то да, но почему тогда в Chrome справа внизу длина стороны обозначается 20, хотя на самом деле она 40?

[Eugene Chefranov]

Drovosek01, хром все правильно показывает. Слева на вашем скриншоте показываются весь размер вашего псевдоэлемента 40px x 40px, а справа на скриншоте показано из каких размеров состоит этот элемент