Как сделать адаптивный наклонный элемент?

Question

[tikos]

Вот есть кусок макета : https://gyazo.com/e589f5553e2d20f6699ad311acf980ba
Проблема в этом наклонном элементе, который за телефонами, я сделал его через абсолютное позиционирование и border-right:transparent(в конце скину код) .
Все нормально было бы еслибы макет был не резиновый, а т.к. border-right указвается только в пикселях, а не процентах,не знаю как сделать этот наклонный элемент адаптивным. Может есть какие нибудь другие способы реализации этого? Заранее большое спасибо
Вот набросал то как я это сделал:
https://jsfiddle.net/4md7xmjm/1/

Answer 1

[dom1n1k]

Линейный градиент под нужным углом и с нулевой шириной перехода.
Примерно так:

background: linear-gradient(280deg, white 0%, white 50%, silver 50%, silver 100%);

Answer 2

[Dark Hole]

Линейный градиент должен помочь htmlbook.ru/css3-na-primerakh/lineinyi-gradient

Answer 3

[Vlad Tytcky]

вот в первом блоке через градиент, во втором через after. У градиента есть небольшой минус- это плохое сглаживание, зачастую наблюдается при контрасте, а вот через after, такого не нет.Да и after поддерживается IE 9,8 ;)

Answer 4

[trushka]

Вместо процентов можно использовать vw иkb vh. Ну и в сочитании с calc() можно вообще очень много чего делать))