Sesgar div with css

Question

Sesgar div with css

Navigation

#1 by (1 votes)

1

Good morning, I have been investigating a bit about how to do the following, but what I have found although it is similar to what I want to achieve is not exactly what I am looking for, what I am looking for is to skew a div and that the result is equal to the one of the image that I show next:

Thank you in advance.

This is what I have done:

.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>

html5 html css3 css css-transform

asked by jose marquez 23.08.2018 в 18:28

source

1 answer

Replace Eval function Problem when executing a click funtion

score 1 · Accepted Answer

I have edited your code a bit to get the form, I helped a little with this tool . You just have to move the padding of .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>