estoy luchando hace unos dias con esto. Necesito armar estos divs como en la imagen:
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!