跳至主要內容
Lizely

CSS 影片路徑生成器

創造並編輯以百分比為基礎的 CSS 多邊形裁剪，搭配即時預設值與驗證過的座標對。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.選擇最接近你需要的形狀的預設值。
  2. 2.以繪圖順序編輯逗號分隔的 x% y% 座標對。
  3. 3.請在預覽中確認目標元素的長寬比。
  4. 4.複製宣告內容並測試佈局、焦點與響應行為。

關於CSS 影片路徑生成器

CSS 影片路徑產生器讓多邊形裁剪變得清晰且可編輯。選擇三角形、菱形、五邊形、六邊形、星形、箭頭、訊息氣泡或平行四邊形預設值，然後直接調整座標清單。每個點包含一個 x 百分比後接一個 y 百分比。預覽會將產生的 polygon() 值套用到實際的塊上，輸出提供完整的裁剪路徑宣告，可直接用於樣式表或內聯樣式。由於座標是相對於元素的參考框，相同的百分比多邊形可以隨著不同寬度和高度而縮放。

多邊形點依照順序讀取。瀏覽器會從第一點連線到第二點，接著一路連線至列表尾，最後將最後一點連回第一點以關閉形狀。改變點的順序即使座標相同，也可能產生不同的外觀。例如星形或箭頭等內凹形狀會刻意向內彎曲。自相交的多邊形可能產生意外的填充結果，因此該工具會驗證語法與範圍，但不宣稱所有點的順序都能產生視覺上有效的結果。預設值提供穩定的起始佈局，你可以進一步最佳化，而不是從空列表重新建立每一個形狀。

每個座標必須使用兩個百分比值，例如 50% 0%。頂點之間以逗號分隔。百分比值在此生成器中限制在零至一百之間，確保點位始終位於參考框內，即使 CSS 可表示超出框外的位置。至少需要三個點才能形成面積，編輯器最多允許二十個點以維持操作與輸出的可管理性。接受小數百分比並自動標準化。缺少百分比符號、負值、超過一百的值、空列表專案或格式錯誤的對值，將產生聚焦錯誤，而不是部分的 CSS。

裁剪路徑屬性控制元素中哪些部分會被繪製。超出裁剪區域的內容將被隱藏，但裁剪不是佈局工具：周圍的元素仍會使用原本的矩形框。裁剪的角落也可能減少可見或互動的區域。請勿裁剪掉關鍵文字、鍵盤焦點指示器或觸控目標。對於圖片，請保留具有意義的替代文字。對於控制項，請謹慎測試指標和鍵盤行為，並避免僅使用裝飾性輪廓作為功能的唯一提示。

百分比座標指的是所選的幾何參考框；在基本裁剪路徑且無明確幾何框的情況下，通常會使用邊框框。一個正方形的預覽可讓星形看起來平衡，而相同的點在寬長矩形上則會顯得拉長。請在實際的寬高比下測試複製的 CSS，並在響應式斷點之間進行驗證。在多邊形之間動畫通常表現最佳的情況是兩者擁有相同數量的頂點且順序相容。此生成器不會產生 SVG 路徑、曲線命令、圓、橢圓、內縮形狀或廠商特定的備用方案。它專注於廣泛適用的數值多邊形形式。

此功能完全在瀏覽器端執行。座標不會上傳或保留，也無需額外依賴。從最接近需求的預設值開始，一次只修改一個座標，並觀察預覽效果。僅在形狀在預期尺寸下仍可讀時才複製宣告。請確認目標使用者的瀏覽器支援情況，若輪廓非關鍵，應提供合理的矩形備用方案，並記住即使視覺上被裁剪的圖片，下載時仍會以原始尺寸呈現。此工具僅協助序列化有效的多邊形；最終頁面的設計品質、可訪問性、效能與內容安全仍需實際測試。

方法與來源

解析 3–20 的逗號分隔百分比座標對，驗證每組 x 與 y 值在 0–100 範圍內，將小數值標準化，依頂點順序序列化為 polygon()，並使用此精確值進行即時預覽。

常見問題

為何瀏覽器會將最後一點連線到第一點？
CSS 多邊形會自動閉合，因此最終頂點會連回起始頂點。
為何我的形狀會延伸到另一個元素上？
百分比座標會依據參考框進行縮放。寬高比的改變會影響可見的長寬比例。
裁剪會改變網頁佈局嗎？
不會。該元素維持原本的矩形佈局框，即使裁剪區域外的像素被隱藏。

相關工具

開發者工具 使用指南

查看全部