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還是產品上線，都可節省開發時間、提升維護效率。