用 css 做web圖形化處理

摘要： 圖片來自 CHRIS COYIER 在前端開發中，你或多或少都會接觸到css圖形。之前我整理過 偽元素&偽類 的內容，為的就是更加熟悉瞭解它們，以便更好的使用它們。同時也也使用它一做了一些動畫。 css3-animate 。 這裡說...

在前端開發中，你或多或少都會接觸到css圖形。之前我整理過 ofollow,noindex">偽元素&偽類 的內容，為的就是更加熟悉瞭解它們，以便更好的使用它們。同時也也使用它一做了一些動畫。 css3-animate 。

這裡說的用css做圖形，其實是使用一個html元素，結合它的偽元素 ::before & ::after （不需要其他額外的非偽元素的html元素），然後定義樣式來生成所需的圖形。

這裡不是說不可以使用其它的html元素，只是這樣的好處是在html方便引入，而不需要每次引入都需要新增大量的html片段（誇張說法）。

主要方法

可以使用的樣式屬性如下：

* border
* border-radius
* transform
* box-shadow

為了相容性，使用pseudo-elements(::before, ::after) 和上面樣式屬性中的一種或幾種隨機組合。

當然，在前端我們經常使用的時svg和font-icon。

還用一種是css3的shape-outside實現文字環繞的效果。

這種單元素的css圖形還是比較實用的。

圖形分類

1. 幾何圖形。如：三角形，正方形，矩形，平行四邊形，五邊形，六邊形等
2. 星形
3. 卡通圖形。如：吃豆人等
4. 圖示。 如：心形，箭頭，鎖，放大鏡等。

具體的圖形列表和程式碼可參考 github