Как сделать такую полоску?

Question

[dzho]

Привет. Как реализовать такую адаптивную полоску?

Добавил вниз блок, задал postition: absolute
прописал border-width

но на разных разрешениях она не ужимаеться. Ведь не писать для каждого устройства отдельный border-width
Спасибо!

Answer 1

[Ivan Bogachev]

Немного подкорректировал вариант, предложенный Дмитрий (с использованием псевдоэлемента и border-width), чтобы угол наклона не менялся при изменении размера экрана - codepen

Comments

[dzho]

Спасибо. Это лучшее решение!

Answer 2

[Олег]

Отвечал недавно, как сделать градиентом Как сделать прямоугольник со скошенной нижней гранью?

Answer 3

[Дмитрий]

https://jsfiddle.net/soledar10/3dLa9d94/

Answer 4

[Ankhena]

Множественный фон из картинки и градиента

background: 
  linear-gradient(to top left, #FFF 0, #FFF 50%, transparent 50.6%,  transparent) bottom no-repeat/ 100% 200px,
  url("http://namonitore.ru/uploads/catalog/other/kapelki_vodi_1600.jpg") no-repeat center center/cover;

В моем примере угол градиента будет меняться в зависимости от ширины блока. Если надо постоянный угол, то нужно указать градус, например, 20deg
https://jsfiddle.net/Lvj166ck/

Answer 5

[masambrero]

Посмотрите вот здесь. Достаточно исчерпывающий материал.