How to make a parallelogram on one side in CSS? -

i trying make parallelogram in css, 1 side not straight, can both sides @ moment, like:

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

which displays bent side on left , right. need on right.

how 1 this?

try using wrapper overflow: hidden; , negative margin, hide left skewed side

#parallelogram {    width: 150px;    height: 100px;    -webkit-transform: skew(20deg);       -moz-transform: skew(20deg);         -o-transform: skew(20deg);    background: red;    margin-left: -19px; /* (tangens(20deg)*100px)/2 */  }  #wrapper{    overflow: hidden;  }

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