Create parallelogram using CSS

In this simple blog I am going to provide a simple code to create a parallelogram through CSS which will be compatible on most of the browsers including Internet Explorer (IE).

Here is the CSS for creating Parallelogram.

#parallelogram 
{      
    width:             150px;     
    height:            100px;     
    -moz-transform:    skew(20deg);     
    -o-transform:      skew(20deg);     
    -webkit-transform: skew(20deg);     

    background: #FF0000;

    /* IE8+ - must be on one line, unfortunately */    
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.3, M12=1.3, M21=0.7, M22=0, SizingMethod='auto expand')";      

    /* IE6 and 7 */    
    filter: progid:DXImageTransform.Microsoft.Matrix(            
            M11=0.3,            
            M12=1.3,            
            M21=0.7,            
            M22=0,            
            SizingMethod='auto expand');
}

<div id="parallelogram"></div>

You can see in the above code there is a function skew(). The function skew() accepting a parameter (here I have passed 20deg), which this the degree at which you want your parallelogram to be skewed, but does not work with Internet Explorer (IE).

For IE I have used -ms-filter and filter. These two will be used to display the parallelogram in Internet Explorer (IE).

In the method Matrix you would be seeing five parameters, ie. M11, M12, M21, M22 and SizingMethod.

  • M11 – This is used to set the angle at which you want to skew.
  • M12 – Width of Parallelogram
  • M21 – Height of Parallelogram
  • M22 – This parameter is used to rotate parallelogram to certain angle (keep this to 0 if you want your parallelogram to be horizontal).

Make changes in the parameters above and see the changes yourself.

Leave a Reply

Your email address will not be published. Required fields are marked *