Home / Questions / 111533
Accepted
Antonio Ángel Estrada Pérez
Asked: 2020-10-24 02:16:37 +0800 CST 2020-10-24 02:16:37 +0800 CST

css parallelogram

  • 772

I'm trying to make a parallelogram but I don't know how to make exactly the one I want. I have seen some that are quite similar to the one 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>

enter image description here That's the most I've ever gotten.

The result I want to achieve is the following:enter image description here

I don't want it to be an image as when I hover and the mouse effects won't work right.

All the best !

css

1 Answers

  1. Best Answer

    Work on the Y axis and that's it:

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

    • 6