4

estoy intentando hacer un paralelogramo pero no sé como hacer exactamente el que quiero. He visto algunos que se asemejan bastante al que quiero conseguir.

#paralelogramo {
   width: 150px; 
   height: 100px; 
   background: #bdc3c7;
   -webkit-transform: skew(20deg); 
   -moz-transform: skew(20deg); 
   -o-transform: skew(20deg); 
}
<div id="paralelogramo" class="forma"></div>

introducir la descripción de la imagen aquí Eso es lo maximo que he conseguido.


El resultado que quiero conseguir es el siguiente:introducir la descripción de la imagen aquí

No quiero que sea una imagen ya que cuando haga el hover y los efectos del mouse no funcionará bien.

Un saludo !

1 respuesta 1

6

Trabaja sobre el eje Y y listo:

#paralelogramo {
   width: 150px; 
   height: 100px; 
   background: #bdc3c7;
   -webkit-transform: skewY(-20deg); 
   -moz-transform: skewY(-20deg); 
   -o-transform: skewY(-20deg); 
   margin-top: 40px;
}
<div id="paralelogramo" class="forma"></div>

2
  • 4
    Creo que es interesante añadir que skew trabaja sobre los dos ejes, el primer parámetro es el eje X y el segundo el eje Y, con lo que skewY(-20deg) es equivalente a skew(0 -20deg) Commented el 23 oct. 2017 a las 10:29
  • Gracias Pablo Lozano , eso me acalra las cosas Commented el 23 oct. 2017 a las 11:31

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.