html5 平形四边形 代码,在CSS3中制作一侧的平行四边形

更新：

这是一个示例和结果代码：jsFiddle.

#trapezoid {

height: 0;

width: 100px;

border-bottom: 100px solid red;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}

这将创建一个梯形.

或这个：

#parallelogram {

width: 150px;

height: 100px;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

background: red;

}

这将创建一个平行四边形

这篇文章是关于使用CSS和单个HTML元素创建各种形状的文章.这是创建从三角形到星形的每个形状的非常有趣的方式.

The Shapes of CSS