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