Parallelogram css

Question

Parallelogram css

Navigation

#1 by (6 votes)

4

I'm trying to do a parallelogram but I do not know how to do exactly what I want. I have seen some that resemble quite what I want to achieve.

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

That's the maximum I've got.

The result I want to achieve is the following:

I do not want it to be an image because when I do the hover and the effects of the mouse it will not work well.

Greetings!

html5 css3 css

asked by Antonio Ángel Estrada Pérez 23.10.2017 в 12:16

source

1 answer

Detect Browser language How to restart a javascript object

score 6 · Accepted Answer

Work on the Y axis and you're done:

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