@Drovosek01

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

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

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

5c8394c07043c684657831.png

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

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

Почему так происходит?
  • Вопрос задан
  • 99 просмотров
Решения вопроса 1
Chefranov
@Chefranov
Новичок
А вы разукрасте стороны и потом изменяйте толщины и вы сразу поймете. Толщина изменяется не от центра стыка, а от края, потому и обрезается перевернутый треугольник.
border-color:  black red blue green;
border-width: 20px 20px 20px 20px;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы