1

Buen día, he estado investigando un poco acerca de como realizar lo siguiente, pero lo que he encontrado a pesar de que es parecido a lo que quiero lograr no es exactamente lo que busco, lo que busco realizar es sesgar un div y que el resultado sea igual al de la imagen que muestro a continuación:

Resultado esperado

De antemano gracias.

Esto es lo que llevo realizado:

.contenedor{
transform: skew(0deg,-2deg);
-ms-transform: skew(0deg,-2deg);
-webkit-transform: skew(0deg,-2deg);
-webkit-box-shadow: 0px 0px 30px 0px rgba(33,33,33,1);
-moz-box-shadow: 0px 0px 30px 0px rgba(33,33,33,1);
box-shadow: 0px 0px 30px 0px rgba(33,33,33,1);

background-color: #111;
margin-top: 60px;
padding: 75px;
}
.contenido{
transform: skew(0deg,2deg);
-ms-transform: skew(0deg,2deg);
-webkit-transform: skew(0deg,2deg);

background-color: #fff;
color: #000;
height: 200px;
}
<div class="contenedor" style="">
<div class="contenido">
Contenido, esto no debe ir sesgado para que pueda ser legible
</div>
</div>

2
  • ¿Puedes mostrar el código que llevas hasta el momento?
    – Rene Limon
    Commented el 23 ago. 2018 a las 16:37
  • Ya edite la pregunta ahí se encuentra lo que llevo... Commented el 23 ago. 2018 a las 16:47

1 respuesta 1

1

He editado un poco tu código para lograr la forma, me ayudé un poco con esta herramienta. Solo debes mover el padding del .contenedor

.contenedor {
  -webkit-clip-path: polygon(0 0, 100% 17%, 100% 83%, 0% 100%);
clip-path: polygon(0 0, 100% 17%, 100% 83%, 0% 100%);
  background-color: black;
  min-height: 180px;
  padding: 100px 30px;
}
.contenido {
  background-color: #fff;
  color: #000;
  height: 180px;
  padding: 50px;
}
<div class='contenedor'>
  <div class="contenido">
    Contenido, esto no debe ir sesgado para que pueda ser legible
  </div>
</div>

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.