LocalTools離線瀏覽器工具合集

分類: 開發工具

CSS Clip-Path 產生器

站方自行規劃沒找到想要的工具？

選擇形狀並複製其 clip-path 值

選擇一個形狀，從圓形、橢圓形到六邊形、箭頭或對話框皆可，調整它與邊緣的內縮距離，即可複製產生的 clip-path 值，並附有即時預覽。

輸出
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。

這個工具能做什麼

手寫多邊形的 clip-path，代表要自己規劃每個點的百分比座標，並想像它們如何連接起來，除了簡單的三角形之外，這種做法在反覆調整時會非常緩慢。本工具內建了一組常見形狀的現成座標清單，並提供單一的內縮控制項，能以相同方式讓任何形狀的每個點都朝中心縮放，讓你不必自己算幾何，就能預覽並複製可用的 clip-path。

使用方式

  1. 選擇一個形狀。
  2. 調整內縮程度，讓形狀在其方框內放大或縮小。
  3. 複製 clip-path 宣告。

隱私說明

本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。

常見問題

為什麼圓形與橢圓形的行為跟其他形狀不同？
circle() 與 ellipse() 使用半徑，所以內縮會直接縮小半徑；而多邊形形狀則是把每個點都以相同百分比朝中心縮放。
clip-path 會影響版面配置，還是只影響可見範圍？
只影響可見範圍。元素在版面配置上仍會保留原本的方框；clip-path 只會隱藏形狀之外的部分，就像 overflow: hidden 隱藏方框之外的內容一樣。
會傳送任何內容到伺服器嗎？
不會。形狀的座標是依你選擇的形狀與內縮程度在頁面內計算出來的，這也是預覽能即時更新的原因。

回到全部工具