0

estoy luchando hace unos dias con esto. Necesito armar estos divs como en la imagen: introducir la descripción de la imagen aquí

La cosa es que tengo que hacer que sean dos divs diagonales, cada cual con su imagen de fondo, porque a su vez tengo que setear un hover para cada uno, que desplegaria una nueva capa de texto en cada uno.

La cosa es que no puedo hacer este efecto diagonal una vez que meto la imagen de fondo. Les comparto a lo poco que llegue con html y css:

    <section>
    <div class="content">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque labore at suscipit reprehenderit asperiores sapiente rem dolorum quisquam quia dolores doloremque dicta dignissimos, nisi quod natus quae beatae minus voluptatum.
    </div>
    <div class="imageBox"></div>
</section>

//El CSS esta asi

body {
  margin: 0;
  padding: 0;
  background-color: #262626;
}

section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 400px;
  width: 1200px;
  background-color: #000;
  box-shadow: 0 25px 30px rgba(0, 0, 0, 0.5);
  display: flex;
}

.content {
  width: calc(50% - 50px);
  height: 100%;
  background-color: #000;
  box-sizing: border-box;
}

.imageBox {
  width: calc(50% + 50px);
  height: 100%;
  background-color: #f00;
  box-sizing: border-box;
  border-left: 100px solid #000;
  border-bottom: 400px solid transparent;
  background-position: -100px -150px;
}

A ver si alguien puede orientarme, gracias!

2 respuestas 2

3

Con tu permiso, he rehecho completamente el código porque el método que has probado sólo es válido para divs con background-color, no con una imagen incrustada dentro.

Dicho esto, te dejo por aquí el JSFiddle. Tendrás que adaptarlo a las medidas que tú quieras:

#container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
#left, #right {
  position: absolute;
  width: calc(50% + 100px);
  height: 300px;
  transform: skew(-20deg, 0deg);
  overflow: hidden;
}
#left img, #right img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: skew(20deg, 0deg);
}
.content {
  position: absolute;
  top: 50%;
  left: calc(50% + 50px);
  background-color: rgba(255, 255, 255, .5);
  transform: skew(20deg, 0deg) translate(-50%, -50%);
  z-index: 1;
}
#right .content {
  left: 50%;
  right: 50px;
}
#left, #right img {
  left: -100px;
}
#right, #left img {
  right: -100px;
}
<div id="container">
  <div id="left">
    <div class="content">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque labore at suscipit reprehenderit asperiores sapiente rem dolorum quisquam quia dolores doloremque dicta dignissimos, nisi quod natus quae beatae minus voluptatum.</p>
    </div>
    <img src="https://wp-growpro.s3-eu-west-1.amazonaws.com/media/2019/05/Koala-Australiano-Curiosidades-do%CC%81nde-verlos-y-mucho-ma%CC%81s.jpg" />
  </div>
  <div id="right">
    <div class="content">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque labore at suscipit reprehenderit asperiores sapiente rem dolorum quisquam quia dolores doloremque dicta dignissimos, nisi quod natus quae beatae minus voluptatum.</p>
    </div>
    <img src="https://estaticos.muyinteresante.es/uploads/images/gallery/5ebbef275bafe8db822fa69c/galeria-koalas.jpg" />
  </div>
</div>

Si te fijas en el código, el método consiste básicamente en deformar el contenedor en cuestión con skew(), y luego posicionar el elemento absolutamente para esconder uno de los extremos.

Como este método deforma tanto el contenedor como su contenido, es necesario neutralizar la deformación en sus hijos, aplicándoles un skew() con valores opuestos.

Tómate tu tiempo para inspeccionar el código y tratar de comprenderlo y, si te queda alguna duda, ya nos comentas. ;)

1
  • Funciona perfecto! Muchas gracias :) Commented el 31 ago. 2021 a las 20:45
0

Tal vez esto te sirve, solo pones la imagen en cada div y la ajustas

    body {
      margin: 0;
      padding: 0;
    }
    section{
      background:linear-gradient(-75deg,#f44 0%,#f44 50%,#44f 50%,#44f 100%);
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .content {
      width:50%;
    }
    .imageBox {
      width: 50%;
    }
    p{
      padding:40px;
      color: #fff;
    }
        <section>
        <div class="content">
            <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque labore at suscipit reprehenderit asperiores sapiente rem dolorum quisquam quia dolores doloremque dicta dignissimos, nisi quod natus quae beatae minus voluptatum.
            </p>
        </div>
        <div class="imageBox">
            <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque labore at suscipit reprehenderit asperiores sapiente rem dolorum quisquam quia dolores doloremque dicta dignissimos, nisi quod natus quae beatae minus voluptatum.
            </p>
        </div>
    </section>

2
  • Y cómo pondrías cada div en imagen y ajustada? Ese es justo el error que el OP comenta. Commented el 30 ago. 2021 a las 19:49
  • hay varias formas una es que la imagen sea el background en cada div si es tal cual como se muestra en la ilustracion, otra es agregar la imgen como etiqueta <img> dentro del div @JheymanMejia
    – HAKU
    Commented el 30 ago. 2021 a las 19:54

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.