CSS Shape 彙整大量 CSS‑only shapes，從基本幾何形狀到複雜圖案，全都只要使用一個 HTML 元素加上現代 CSS，就能產生。
特點
單元素實作（Single‑element）
全部形狀只需一個 <div class="shape-name"></div>，幾乎不會用到 :before 或 :after，因此可整合至圖片中，例如邊框貼圖都沒問題
現代 CSS 語法
以 CSS 變數控制參數且無需 hack 技巧，不用記憶「magic number」，僅需調整變數即可輕鬆變形，風格乾淨、程式碼易維護 。
最小化與優化程式碼
官方強調每個形狀皆是「優化後、最短的程式碼」，更不犧牲可讀性，配合 CSS 變數，用量少、執行快又好理解
支援漸層與自訂
很多 shape 可套用 CSS 漸層，多色切割也能使用自訂變數控制，如調整斜邊角度、邊框厚度、曲線彎度等更有變化 。
包含的形狀一覽
-
基本幾何圖形：三角形、圓形、六角形、星星、菱形、八邊形⋯⋯
-
邊角樣式：圓弧、切角、掃狀角、內凹、弧形邊、折線邊
-
分隔元素：波浪線、鋸齒線、圓形或三角裁切
-
3D 與特殊圖案：立方體、螢幕、雲朵、閃電、拼圖、Wi‑Fi／電量圖示、蝙蝠俠、甲骨文⋯⋯等等超過 100 種
如果你曾為網頁需要「一個箭頭分隔」、「一個五角星標籤」、「一條鋸齒邊緣」而翻遍網路資源、研究 SVG hack，CSS Shape 是你所需要的終極選項：全面、可客製、易整合，又支援漸層與變數調整。無論是prototype還是產品上線，都可節省開發時間、提升維護效率。
