CSS 裁切路徑產生器
透過拖放視覺化建立 CSS clip-path 形狀。 包含多邊形、圓形、橢圓形以及星形、愛心等預設。
形狀類型
預設
預覽
拖動點位移，雙擊新增/移除
控制項
點位列表
#1
#2
#3
產生的 CSS
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);分享此工具
📖
使用方法
Step 1
選擇形狀
選擇裁切路徑形狀
→
Step 2
調整頂點
拖動頂點調整形狀
→
Step 3
複製
複製 CSS 代碼使用
✨
功能特色
拖動編輯
拖動點位自由修改形狀
基本形狀
支援圓形、橢圓形、多邊形、內嵌
預設形狀
提供星形、箭頭、愛心等預設
❓
FAQ
將元素顯示裁切為特定形狀的 CSS 屬性。
🔗相關工具
🎨
設計工具色碼換算工具
在 HEX、RGB 和 HSL 色碼之間互換。 使用顏色選擇器和即時預覽直觀選色。
🎨
設計工具色彩選擇器
使用色輪和滑桿直覺地選取顏色。 取得並複製 HEX、RGB 和 HSL 格式的色彩代碼。
🎨
設計工具圖片色彩擷取器
自動偵測圖片中的主要色彩並生成色彩調色盤。 也可以點擊圖片上的任意位置來取得個別色彩。
🎯
設計工具圖片平均色彩擷取器
計算整張圖片或選定區域的平均色彩。 適合用於選擇配色方案或縮圖背景顏色。
🌈
設計工具CSS 漸層產生器
使用拖動控制視覺化建立 CSS 漸層。 支援線性、放射狀和圓錐漸層類型及預設。
🔲
設計工具CSS 陰影產生器
使用滑桿視覺化建立 CSS box-shadow。 支援多重陰影和內陰影。