How to make an adaptive slanted element?

Question

css

Here is a piece of the layout: https://gyazo.com/e589f5553e2d20f6699ad311acf980ba
The problem is this slanted element, which is behind the phones, I made it through absolute positioning and border-right:transparent (I will throw off the code at the end) .
Everything would be fine if the layout was not rubber, but because border-right is only specified in pixels, not percentages, I don't know how to make this slanted element responsive. Is there any other way to implement this? Thanks a lot in advance
Here's how I did it:
https://jsfiddle.net/4md7xmjm/1/

Answer 1

A linear gradient at the desired angle and with a transition width of zero.
More or less like this:

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

Answer 2

Linear gradient should help htmlbook.ru/css3-na-primerakh/lineinyi-gradient

Answer 3

here in the first block through the gradient, in the second through after. The gradient has a small minus - this is poor anti-aliasing, often observed with contrast, but after, this is not the case. Yes, and after is supported by IE 9.8;)

Answer 4

You can use vw and kb vh instead of percentages. Well, in combination with calc(), you can generally do a lot of things))