css33d画梯形,CSS3绘制梯形或平行四边形，一个矩形边

我尝试仅使用CSS3创建关注图片：

CSS

.pgram {

width: 150px;

height: 100px;

-webkit-transform: skew(-20deg);

-moz-transform: skew(-20deg);

-o-transform: skew(-20deg);

background: #fff;

border: 1px solid #D8D8D8;

height: 24px;

text-indent: 10px;

float: left;

margin: 20px;

}

/*

* not displayng :(

*/

.pgram:after {

border-bottom: 23px solid red;

border-left: 11px solid transparent;

content: "xxxxx";

/*

display: block;

float: left;

*/

height: 20px;

width: 10px;

background: blue;

}

但我对我的测试没有兴趣，这是JS Fiddle的结果：

使用旋转两个顶点都将被转换。怎么只能左转？我发现使用边框大小的所有多边形示例，然后我不能有外边框:(