CSS 形狀產生器

📖 工具介紹

CSS 形狀產生器是一款協助開發者用 clip-path 快速切出各種幾何外形的免費線上工具。網頁裡想用三角形標籤、菱形卡片、蜂窩六邊形、五角星、對話氣泡或斜角橫幅時，過去要嘛切圖片，要嘛手算 polygon 的百分比頂點，既麻煩又容易算錯。本工具把六種常用形狀做成一鍵切換的按鈕，你只要選擇形狀、挑一個填色，再拖動變形參數滑桿，預覽區裡的色塊就會即時被裁剪成對應外形，下方同步產生標準的 clip-path: polygon(...) 程式碼。變形參數對不同形狀含義不同：三角形控制頂角位置，六邊形控制水平切角寬度，星形控制內半徑大小，氣泡控制尾巴落點，斜角控制切角深度，全部由頂點座標即時計算得出。產生的程式碼可以直接複製到專案，clip-path 既能裁色塊也能裁圖片。工具全程在瀏覽器本機拼裝頂點字串並套用，不發出網路要求，介面支援簡中、繁中與英文三語。

✨ 功能特點

• 六種幾何外形：三角形、菱形、六邊形、星形、氣泡、斜角一鍵切換
• 頂點即時計算：根據變形參數用座標公式算出 polygon 頂點，數學準確
• 顏色自由取色：填色任意選擇，預覽即時更新
• 變形參數可調：頂角、切角、內半徑、尾巴位置、斜角深度平滑拖動
• 標準程式碼輸出：產生帶 background 與 clip-path 的完整 CSS 規則
• 即時預覽：色塊被 clip-path 裁剪的效果所見即所得

📝 使用方式

1. 在頂部點擊你想要的形狀按鈕
2. 用取色器設定形狀的填充顏色
3. 拖動變形參數滑桿，觀察預覽色塊外形的變化
4. 確認形狀與配色符合預期後，檢視下方產生的 CSS 程式碼
5. 點擊複製程式碼，貼到專案樣式表中套用於任意元素

⚠️ 注意事項

• 裁剪本質：clip-path 只改變可見區域，元素本身的尺寸仍為矩形
• 參數含義：同一滑桿對不同形狀作用於不同頂點，切換形狀後含義會變
• 星形演算法：五角星由五個外頂點與五個內頂點交替取樣產生
• 圖片適用：clip-path 同樣可作用於 img，實現異形圖片裁剪
• 本機產生：所有頂點字串都在瀏覽器拼裝，不產生網路要求