.section{
width: 100%;
position: relative;
}
#section1{
background:#f47070;
z-index: 10/*10*/;
}
#section2{
background-image: url('img/Elementos/parallax-blue.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
z-index: 9;
height: 400px !important;
/*transform-origin: left bottom;
transform: skewY(4deg);*/
}
#section3{
background: #f5f567;
z-index: 8;
}
#section4{
background: #83ec89;
z-index: 7;
}
#section5{
background: #f47070;
z-index: 6;
}
#section6{
background: #f5d36e;
z-index: 5;
}
.compu {z-index: 14 !important; height: 570px; width: 622px; margin-top: -4%; }
.section::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
bottom: 0;
}
#section1::after, #section2::after, #section4::after{
transform-origin: left bottom;
transform: skewY(4deg);
}
.ver::after, .ver::before {
transform-origin: left bottom !important;
transform: skewY(4deg) !important;
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
bottom: 0;
}
#section2::after {height: 400px !important;}
#section2::after img::after {content: ''; margin-top:-10px; z-index: -14 !important; position: absolute;}
#section3::after, #section5::after{
transform-origin: right bottom;
transform: skewY(-3deg);
}
.sectionInner{
height: auto;
display: block;
overflow: hidden;
padding: 200px 50px;
text-align: center;
color: rgba(0, 0, 0, 0.5);
font-weight: bold;
font-size: 2em;
}
<div class="sectionWrapper">
<div id="section1" class="section">
<div class="sectionInner">
Section One
</div>
</div>
<div id="section2" class="section ver" style="border: 1px black solid;">
<!--<div class="sectionInner">
Section Two
</div> -->
<div class="contenedorCuroos">
<img src="img/Elementos/computadora.png" class="compu" style="left: 0; position: relative; margin-left: -6%;">
<div class="cajaCursos" style="position: absolute; margin-top: 0 !important;">
<h2>Cursos básicos</h2>
<p>Conoce los requisitos e inscríbete y participa en los cursos y talleres de la Biblioteca Virtual</p>
<button class="boton" role="button" style="z-index: 3;">Consultar</button>
</div>
</div>
</div>
<div id="section3" class="section">
<div class="sectionInner">
Section Three
</div>
</div>
<div id="section4" class="section">
<div class="sectionInner">
Section Four
</div>
</div>
<div id="section5" class="section">
<div class="sectionInner">
Section Five
</div>
</div>
<div id="section6" class="section">
<div class="sectionInner">
Section Six
</div>
</div>
</div>
Estoy diseñando un sitio que me encargaron, y debo de montar o superponer una imagen en un div diagonal,. He usado z-index, pero todavía no sale. También he usado clip-path para cortar parte del div, pero igual corta la imagen. Dicha imagen debe estar dentro del contenedor, pero que lo sobreponga; también debe ser responsiva y la imagen queda dentro del contenedor sin superponer (eso ya quedó). Alguna idea para solucionar? En el enlace está el diseño como debe quedar. Es la imagen home-biblio-1 En el código es una muestra de ejemplo, basta con que esté bien la img de la lap https://www.dropbox.com/sh/f0l17khuwn60a08/AAAd36bdmw5oGN8MJm5lfPOna?dl=0