CSS繪製不規則圖形
在實際開發中，經常會遇到繪製圖形（圖標）的需求，比如：箭頭圖表、不規則圖形、規則圖形；
常見方法
- 對於圖形的實現，可以大體上分爲幾種做法
(1) 背景圖片，請UI小姐姐幫你吧……此處略過；
(2) CSS3的屬性：圓角、透明度、變形、邊框、僞類等屬性實現；
(3) 漸變屬性：通常使用線性漸變實現切角；
(4) 裁剪屬性：
(5) Canvas實現：
- 比較
| 方法 | 描述 | 適用性 | 優點 | 缺點 |
|---|---|---|---|---|
| 背景圖 | ||||
| CSS3屬性 | ||||
| 漸變屬性 | ||||
| 圖像裁剪 | ||||
| Canvas |
一、背景圖實現
背景圖存在的問題：
- 佔用資源較大，修改維護不方便，靈活性不足；
二、CSS3屬性：圖形實現
大體可以劃分爲：
- 三角形系列：三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角；
- 圓形系列：圓形、橢圓、扇形、圓環、月牙、蛋形
- 四邊形系列：正方形、長方形、菱形、平行四邊形、梯形、直角梯形
- 多邊形系列：五邊形、鑽石、六邊形、八邊形、
- 特殊形狀：心形、無窮大符號、食人豆、太極圖
- 星形系列：五角星、六角星、八角星、十二角星
- 實際需求：對話框
示例代碼：
三、漸變屬性
漸變分爲：徑向漸變、線性漸變；
關鍵是掌握三個要素：
- 漸變線（gradient line）
- 漸變線上的起始點（starting point）和結束點（ending point）
- 在起始點和結束點上的顏色值
四、圖像裁剪
待續……