前言
經常能夠看到一些用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，也就是各個子產品的重疊層次，遮蓋了一些無用的線條和框角。
示範位址：示範位址
源碼下載下傳：源碼下載下傳