Tengo un problema al utilizar clip-path: el clip no acompaña a la figura, no se mueve con ella, sino que se queda pegado en una esquina. Entonces cuando trato de hacer el responsive se complica todo. Aquí agrego un ejemplo del código que estoy utilizando. La imagen del background termina en ángulo. Yo necesito que cuando se empequeñece la pantalla esa imagen continúe así. Pero se pierde el ángulo. Alguien tiene alguna recomendación que me oriente?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#caja1{
background-size: 100%;
background-repeat: no-repeat;
background-image: url("https://images.unsplash.com/photo-1517880014665-8b84b2e26002?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f68dce4bbc5a44c6e499aec220423bd2&auto=format&fit=crop&w=500&q=60");
-webkit-clip-path: polygon(0 1%, 100% 0%, 100% 70%, 0% 90%);
clip-path: polygon(0 1%, 100% 0%, 100% 70%, 0% 90%);
width: 100%;
height: 900px;
}
</style>
</head>
<body>
<div id="caja1">
fondo marino
</div>
</body>
</html>