How to make a cross browser beveled stretch box with clip-path?

Question

css

How to make a beveled stretch block with clip-path?
The essence of the problem.
Making clip-path with svg in percentage. Everything works, but when the height of the block changes (if there is more content inside or if the text becomes narrower and taller when adapting), the cut angle starts to change.
How to make it stay the same?

Answer 1

1. bennettfeely.com/clippy - will help you generate what you need.
2. Use the calc() function along with this CSS
For example:

-webkit-clip-path: polygon(50px 0, 100% 0, 100% calc(~"100% - 50px"), calc(~"100% - 50px") 100%, 0 100%, 0 50px);
    clip-path: polygon(50px 0, 100% 0, 100% calc(~"100% - 50px"), calc(~"100% - 50px") 100%, 0 100%, 0 50px);

Trim the top left corner and the bottom right. Those. move in that direction.
But in Firefox'e and the explorer will not work. (In the FF, you need to turn on the checkbox) I.e. there are problems with clip-path caniuse.com/#search=clip-path