6

Este es el resultado que llevo hasta ahora:

vista del html

Tengo como duda cómo sería posible hacer que la imagen esté por encima de la linea que la oculta.

Éste es mi código:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #ffffff;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
}

.container {
  height: 95vh;
}

.header {
  background-image: linear-gradient(to right bottom, rgb(97, 166, 14, .7), rgb(0, 73, 135, .7));
  /*url(img/fondo.jpg);*/
  background-size: cover;
  background-position: top;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
}

.header .logo-box img {
  height: 5vh;
}

.imagen-data .img-data {
  max-width: 100%;
}

.data-planning {
  text-align: center;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&display=swap" rel="stylesheet">

  <!-- css -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="estilos.css">
  <title>Data Planning</title>
</head>

<body>
  <header class="header">
    <div class="container">
      <div class="row d-flex align-items-center mt-4">
        <div class="col-4 data-planning">
          <h1>Data Planning</h1>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, totam?.</p>
          <button type="button" class="btn btn-primary">Empezemos</button>
        </div>
        <div class="col-8 imagen-data">
          <img src="https://placehold.it/400x400" alt="data" class="img-data">
        </div>
      </div>
    </div>
  </header>
</body>

</html>

2 respuestas 2

5

El problema que estás encontrando se debe a que con clip-path el overflow siempre va a quedar escondido. Por lo que la imagen siempre se va a ver cortada por la línea diagonal.

Para evitar esto puedes optar por varias alternativas:

  • Trata de imitar el comportamiento del clip-path usando fondos y gradientes (ya tienes uno, pero puedes tener más de uno y se superpondrán). Esto puede ser algo complicado ya que tendrás que jugar un poco con los valores para que quede como quieres.

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Open Sans', sans-serif;
      color: #ffffff;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.7;
    }
    
    .container {
      height: 95vh;
    }
    
    .header {
      background-image: linear-gradient(-15deg, white 40%,transparent 40%), linear-gradient(to right bottom, rgb(97, 166, 14, .7), rgb(0, 73, 135, .7));
      /*url(img/fondo.jpg);*/
      background-size: 100%, cover;
      background-position: top;
    }
    
    .header .logo-box img {
      height: 5vh;
    }
    
    .imagen-data .img-data {
      max-width: 100%;
    }
    
    .data-planning {
      text-align: center;
    }
    <!DOCTYPE html>
    <html lang="es">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <!-- fonts -->
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&display=swap" rel="stylesheet">
    
      <!-- css -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <link rel="stylesheet" href="estilos.css">
      <title>Data Planning</title>
    </head>
    
    <body>
      <header class="header">
        <div class="container">
          <div class="row d-flex align-items-center mt-4">
            <div class="col-4 data-planning">
              <h1>Data Planning</h1>
              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, totam?.</p>
              <button type="button" class="btn btn-primary">Empezemos</button>
            </div>
            <div class="col-8 imagen-data">
              <img src="https://placehold.it/400x400" alt="data" class="img-data">
            </div>
          </div>
        </div>
      </header>
    </body>
    
    </html>

  • Usa pseudo-elementos para poner el fondo que quieres y recortarlo. De este modo, el contenido del header no se verá cortado por el clip-path.

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Open Sans', sans-serif;
      color: #ffffff;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.7;
    }
    
    .container {
      height: 95vh;
    }
    
    .header {
      /*url(img/fondo.jpg);*/
      background-size: cover;
      background-position: top;
      position: relative;
    }
    
    .header::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
      background-image: linear-gradient(to right bottom, rgb(97, 166, 14, .7), rgb(0, 73, 135, .7));
    }
    
    .header .logo-box img {
      height: 5vh;
    }
    
    .imagen-data .img-data {
      max-width: 100%;
    }
    
    .data-planning {
      text-align: center;
    }
    <!DOCTYPE html>
    <html lang="es">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <!-- fonts -->
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&display=swap" rel="stylesheet">
    
      <!-- css -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <link rel="stylesheet" href="estilos.css">
      <title>Data Planning</title>
    </head>
    
    <body>
      <header class="header">
        <div class="container">
          <div class="row d-flex align-items-center mt-4">
            <div class="col-4 data-planning">
              <h1>Data Planning</h1>
              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, totam?.</p>
              <button type="button" class="btn btn-primary">Empezemos</button>
            </div>
            <div class="col-8 imagen-data">
              <img src="https://placehold.it/400x400" alt="data" class="img-data">
            </div>
          </div>
        </div>
      </header>
    </body>
    
    </html>

3

Deberías usar el propiedad CSS z-index la cual recibe como valor un número que a mayor valor entonces colocará a este elemento por encima de su predecesor; es decir:

El div:

.imagen-data{
    z-index: 1;
}

Lo anterior provocará se vea por encima del div que contiene el h1 que dice Data Planning

2
  • 2
    Esto no soluciona el problema porque realmente el usuario está usando clip-path para cortar la cabecera. Cambiar el z-index de la imagen (o su contenedor), no hará que quede por encima de la línea cortada.
    – Alvaro Montoro
    Commented el 13 ago. 2019 a las 14:48
  • Gracias por la observación, pase por alto ese detalle
    – user128299
    Commented el 13 ago. 2019 a las 16:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.