小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

绘制

在前面的文章（一）巧用CSS3之三角形中我们绘制了三角形，这边文章会讲一下四边形的绘制。

容器

<div class="quadrilateral"></div>

绘制四边形我们准备一个div元素足以，接下来就是它的变身时刻。

样式

横看成岭侧成峰，换个样式便不同。看的角度不同，看到的效果也就不同；样式发生变化的时候，图形自然也会变。

长方形

这个效果就很容易实现，如下

.quadrilateral{
    width: 200px;
    height: 100px;
    background-color: red;
}

平行四边形

平行四边形是在长方形的基础上进行形变得来的，如下：

.quadrilateral{
    width: 200px;
    height: 100px;
    background-color: red;
    transform: skew(45deg);
}

当然你也可以通过两个三角形和一个长方形进行拼接而得到。

菱形

菱形也是在长方形的基础上进行形变得来的，如下：

.quadrilateral {
    width: 200px;
    height: 200px;
    background-color: red;
    transform: rotateZ(45deg) skew(-20deg, -20deg);
}

当然你也可以通过四个三角形进行拼接而得到。

梯形

我们可以对比一下三角形，绘制三角形的宽高是为0，如果给个宽相当于把三角形从中间拉伸开来，如下：

.quadrilateral{
    width: 100px;
    border: 100px solid transparent;
    border-bottom-color: red;
    background-color: yellow;
}

图中把背景颜色去掉就是梯形。

总结

平行四边形和菱形主要用到了形变，而梯形则是和三角形的绘制类似。

想了解其他动画效果，请前往《有趣的动画》 专栏，希望对你有所帮助。