It seems like you are in need of an overlay that can adjust its size according to the screen size, along with a background image in a div. One approach you could consider is nesting these divs inside the one that requires clipping, as shown in this example. In this demonstration, I have used a single div with a transparent background and a border. For more complex shapes like parallelograms, diamonds, or triangles, you may require additional divs (at least 2).
Unfortunately, CSS does not support percentage borders, but the provided example might still be helpful. Alternatively, you can place your image div inside the clipper divs; choose the method that suits your layout the best.
body, html {
/* required for percentage sizing of child elements */
width: 100%;
height: 100%;
}
#tobeClipped {
width: 80%;
height: 40%;
position: relative;
background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
background-size: cover;
}
#tobeClipped>div {
position: absolute;
}
#clippers {
width: 100%;
height: 100%;
border: 20px solid grey;
border-left-width: 100px;
box-sizing: border-box;
}
<div id="tobeClipped">
<div id="clippers"></div>
</div>
If this solution does not meet your requirements, please provide further clarification on what you are seeking.