How to make the clip-path move with the image?

Question

How to make the clip-path move with the image?

Navigation

#1 by (0 votes)

1

I have a problem when using clip-path: the clip does not accompany the figure, it does not move with it, but it stays stuck in a corner. So when I try to do the responsive everything is complicated. Here I add an example of the code I am using. The background image ends at an angle. I need that when the screen dwarfs that image continue like this. But the angle is lost. Does anyone have any recommendation to guide me?

<!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>

css3 css svg

asked by Olga L. V. 19.04.2018 в 00:29

source

1 answer

In SQL, does SET time_zone work for a table or the entire database? Problems capturing values of a multiple select in Angular 5

score 0 · Accepted Answer

One option is to put a container that gives the size to the div with the clip, give the internal div 100% wide and high, and the image make it cover the entire background:

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    body {
      padding: 0;
      margin: 0;
    }

    #caja-contenedor {
      width: 100vw;
      height: 100vh;
    }

    #caja1 {
      background-position: center;
      background-repeat: no-repeat;
      background-image: url(https://images.unsplash.com/photo-1517880014665-8b84b2e26002?ixlib=rb-0.3.5…jEyMDd9&s=f68dce4…&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: 100%;
      background-size: cover;
    }
  </style>
</head>

<body>
  <div id="caja-contenedor">
    <div id="caja1">
      fondo marino
    </div>
  </div>
</body>

</html>

#caja-contenedor dictates the size
#caja1 adapts to clip and background

edit I add demo changing id by classes and an example of how to limit the width or height of the container

#caja-contenedor {
  width: 100vw;
  height: 100vh;
  max-width: 640px;
  max-height: 800px;
  margin: 0 auto;
}

.contenedor {
  position: relative;
}

.caja-bkg {
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://images.unsplash.com/photo-1517880014665-8b84b2e26002?ixlib=rb-0.3.5…jEyMDd9&s=f68dce4…&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%);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
}

.row {
  width: 100%;
}

.col-20 {
  width: 20%;
}

.col-60 {
  width: 60%;
}

.unatabla {
  display: flex;
  flex-direction: row;
  min-height: 320px;
}

<div id="caja-contenedor" class="contenedor">
  <div class="caja-bkg">
    fondo marino
  </div>
</div>
<div class="row unatabla">
  <div class="col-20">primera columna</div>
  <div class="col-60 contenedor">
    <div class="caja-bkg">
      fondo marino 2
    </div>
  </div>
  <div class="col-20">tercera columna bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div>
</div>