How can I make a similar shape to a parallelogram in css?

Question

I am trying to make a shape similar to a parallelogram, but without the angle on the right side. So it will keep its straight up and down line on the right, but the left side will keep its angle. Here is a fiddle: http://jsfiddle.net/2hj88xts/

CSS:

#parallelogram {
   width: 250px;
   height: 100px;
   transform: skew(-15deg);
   background: red;
}

Answer 1

You could try using a border-left with transparent as the color and abandon the *-transform's altogether. This would require a CSS change but no additional HTML markup:

Current Angle:

#parallelogram {
    width: 250px;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 30px solid transparent;
    margin-left: 10px;
}

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

To adjust the left angle simply tweak the border-left pixel amount. The larger the pixel amount, the more shallow the angle. The smaller the pixel amount, the steeper the angle.

Shallow Angle:

#parallelogram {
    width: 250px;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
    margin-left: 10px;
}

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

Steep Angle:

#parallelogram {
    width: 250px;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 15px solid transparent;
    margin-left: 10px;
}

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

Answer 2

Use a pseudo element :

#parallelogram {
    width: 250px;
    height: 100px;
    background: red;
    margin-left: 100px;
    position:relative;
}

#parallelogram:before{
    content: '';
    position:absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 100px 40px;
    border-color: transparent transparent red transparent;
    left: -40px;
}

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

JSFiddle

---

Update

If you love living on the edge, try clip-path:

#parallelogram{
	width: 250px;
	height: 100px;
	background: red;
	-webkit-clip-path: polygon(29% 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(29% 0, 100% 0, 100% 100%, 0% 100%);
}

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

JSFiddle