原文：https://css-tricks.com/the-shapes-of-css/
CSS能夠生成各種形狀。正方形和矩形很容易，因為它們是 web 的自然形狀。添加寬度和高度，就得到了所需的精確大小的矩形。添加邊框半徑，你就可以把這個形狀變成圓形，足夠多的邊框半徑，你就可以把這些矩形變成圓形和橢圓形。
我們還可以使用 CSS 偽元素中的 ::before 和 ::after，這為我們提供了向原始元素添加另外兩個形狀的可能性。通過巧妙地使用定位、轉換和許多其他技巧，我們可以只用一個 HTML 元素在 CSS 中創建許多形狀。
雖然我們現在大都使用字體圖標或者svg圖片，似乎使用 CSS 來做圖標意義不是很大，但怎麼實現這些圖標用到的一些技巧及思路是很值得我們的學習。
1.正方形
2.長方形
3.圓形
4.橢圓形
5.上三角
6.下三角
7.左三角
8.右三角
9.左上角
10.右上角
11.左下角
12.右下角
13.箭頭
14.梯形
15.平行四邊形
16.星星 (6角)
17.星星 (5角)
18.五邊形
19.六邊形
20.八邊形
21.愛心
22.無窮大
23.菱形
24.鑽石
25.鑽戒
26.鑽石2
27.蛋蛋
28.吃豆人
29.對話泡泡
30. 12點 爆發
31. 8點 爆發
32.太極
33.徽章絲帶
34.太空入侵者（電腦遊戲名）
35.電視
36.雪佛龍
37.放大鏡
38.Facebook圖標
39.月亮
40.旗
41.圓錐
42.十字架
43.根基
44.指示器
45.鎖
分享到:
閱讀更多 前端小智 的文章
