Untitled

A <div></div> is supposed to be rectangle or square, can we use html5 or any other method of web technology to make it appear like a rhombus?

#rhombusDiv {

 width: 150px;

 height: 100px;

 -webkit-transform: skew(20deg);

 -moz-transform: skew(20deg);

 -o-transform: skew(20deg);

  background: blue;

 }

       

<div id="r_paper"></div>

       

var paper = Raphael( "r_paper" );

paper.path(

    "m10,140 l125,-100 l125,100 l-125,100 l-125,-100"

).attr({

    'stroke-width': 5, fill: 'crimson'

});

       

#r_paper {

    position: absolute;

    width:270px; height:270px;

    left: 100px; top:100px

}