纯CSS3绘制腾讯QQ的企鹅Logo
前言
经常能够看到一些用CSS3绘制的精致图形，它们通常由矩形，圆形，椭圆，三角形,梯形等组合而成。要想绘制我们自己的图形，就要先了解下基本图形的绘制方法了。
一个display：block的元素设定宽高之后表现为矩形。通过设定border-radius可以得到圆角矩形，圆形和椭圆形。
前面有文章CSS绘制三角形和箭头，不用再用图片了，可以先去了解一下！
在使用border-radius时，有几点可能需要注意一下：
1. border-radius，可以分别对4个角进行设定。 例如上图：border-top-left-radius: apx bpx;
2. border-xxx-xxx-radius的两个值分别代表着椭圆长轴和短轴长度的一半，通常简写的时候例如3. border-top-left-radius: 10px;(border-top-left-radius:10px 10px;) 表明长轴和短轴的长度均为20px，也就是半径为10px的圆形（圆角部分）。
3. 当使用百分比数值时，a 相对于width， b相对于height如果a == width/2, b == height/2，结果就是一个椭圆，与此同时a==b，那么就可以得到一个半径为a的圆形了。
在看三角形之前，首先看看三角形的“绘制者”border，下面的例子：
.test{
border: 20px solid;
border-top-color:#4e5ecf;
border-right-color:#ee1166;
border-bottom-color:#44bb44;
border-left-color:#775544;
width:100px;
height: 100px;
background: #272822;
}将每个boder的颜色值设为不一样，就可以清楚的看到每个border的负责区域，有三角形的雏形了。其实，绘制三角形的原理很简单，如下图
我们可以这样去理解一个border所代表的区域，那就是“三角形x2 + 矩形”，以border-bottom为例，
矩形 = width x ( border-bottom-width )
相邻的border交叉的区域构成一个矩形，每个border各负责一半，一个直角三角形。只要将其中的一个border的颜色值设为transparent或者背景色，从视觉上就可以得到一个直角三角形了。
- 三角形1 = border-left-width x border-bottom-width
- 三角形2 = border-right-width x border-bottom-width
当width = 0 （height = 0, border-left || border-right）时，我们通过调整border的宽度可以将这两个直角三角形拼接成任意形状的三角形，或者调整width(height)等获得一个梯形，当然梯形也可以通过拼图得到，这样不是更简单吗？。Transform中旋转将为我们提供更多的灵活变化。
绘制企鹅
结束了对于基本图形部分的一些讨论，开始着手于QQ 企鹅的绘制。
第一步当然是基本框架的绘制了。
通过对手里的Logo图像的观察，按照层次划分来组合最终的效果。选择使用绝对位置position:absolute;来布局各个元素。主要划分为头部，身体，围脖，双手，双脚。
框架的结果图：
介绍下这个过程中几个比较典型的图形绘制方法：
1、企鹅的眼睛：椭圆，直接设置border-radius:50% 50%; 即可（因为宽高分别为44px和66px，所以也可以这样设定：border-radius: 22px / 33px）
2、围脖的尾部：一个圆角各异的矩形，所以这里需要对几个角分别设定border-radius，微调的结果为
border-bottom-left-radius: 50% 43%;
border-bottom-right-radius: 15px;
border-top-left-radius: 20% 57%;3、企鹅的胳膊：手的绘制较为麻烦一点，可以分为上下两个部分，将绘制的结果拼接到一起。那么对于不需要的部分怎么办呢？我们可以将上(下)部分放到一个div(container)中，利用overflow:hidden的属性来截取所要的部分。绘制复杂图形的时候常用的方法就是切割和拼接，将图形切割成一个个简单的小块，通过层叠和旋转变化进行组合。
使用transform:rotate(deg)的时候，优先设定transform-origin属性，会比较方便。设定的点作为中心点，整个图形绕着这个点进行角度变化。例如：transform-origin:bottom left， 使用左下角作为原点。也可以使用具体的像素值和百分比。
在基本的框架线条中比非常多的使用了border-radius用于构造各种曲线条，小企鹅是圆圆胖胖的，:)
接下来就是对只有基本线条的小企鹅进行着色了。着色的过程可以帮助我们调整z-index，也就是各个模块的重叠层次，遮盖了一些无用的线条和框角。
演示地址：演示地址
源码下载：源码下载