Как задать border ширину в процентах?

Question

[Максим Алёшин]

Имеется резиновый блок у него незадана высота. Как задать ширину верхнему и нижнему border'у в процентном соотношении?

Answer 1

[Кирилл]

Никак. Можно border заменить на псевдоэлементы before и after и уже им задать высоту в процентах. Но без конкретного кода сложно предложить что-то более конкретное.

Answer 2

[GreatRash]

Хм, интересно вот мне, нафига вам это извращение понадобилось... и быть может вас спасёт box-sizing: border-box;?

Comments

[Тимур Орлов]

Думаю вопрос имеет место быть, если через псевдокласс делать КОСУЮ (часто дизайнеры используют наклонные поверхности), проценты необходимы для идентичности его (бордюра) ширине/высоте блока, при эффекте заполнения (НЕ появления), с какой-либо из сторон в противоположную, если таких элементов десяток с разными величинами, делать клоны стилей меняя лишь эти значения затратно по времени и больше места лишнего.
Да, бордюры не могут иметь проценты, это и так ясно. Единственный вариант - javascript.

Answer 3

[Тимур Орлов]

Такое решение бы помогло сделать относительную ширину в изменяемом динамически окне, то есть без обновлений страниц, а адаптивно, но без javascript. К сожалению не существует решения, проценты невозможно задавать бордюру.
НО, есть величины, которые учитываются в бордюре....как ни странно, это vh и vw ))))
Единственная проблема, эти величины полностью игнорируют полосу прокрутки.
Вот что у меня получилось:

.home .top-banner .ban-for-mob:after {
    content: '';
    display: block;
    position: absolute;
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-top: 50px solid #231f20;
    border-bottom: 0;
    top: 100%;
    left: 50%;
    margin-left: -50vw;
}

Попробовал в одном проекте, и получилась такая "стрела" к блоку, указывающая на нижний блок, при этом, как видно, адаптируемая.
К сожалению эти величины ещё рано использовать в проектах серьёзных.
https://caniuse.com/#search=vh
И хотя показана поддержка почти всех кроме Opera-mini, тем не менее в России поддержка всего 79.54%, то есть добрых 20% носителей - счастливчики. И кто знает, может именно эти 20% являются абсолютным большинством покупателей/заказчиков ваших товаров/услуг. К примеру, если это студенты. А товары как раз для них. Или на оборот люди за 40 лет, и товары как раз для них. 20% - это 5-я часть от всех пользователей интернета в России....это не мало.
Но эксперимент удачен. Такие величины будут работать с бордюрами и вообще везде, надо лишь дождаться большей поддержки.