在大多數用戶界面之下，潛藏著一整套鮮為人知的CSS魔法。這不是關于布局、間距或排版的技巧，而是關于形狀的藝術——突破默認方框的束縛，讓你的界面朝著全新維度延展。本系列將深入探討這類能重塑界面形態、賦予動態表現力的CSS特性。

CSS中的clip-path是什么？

clip-path的核心功能是控制元素的可見區域。它就像HTML元素的鏤空模板或餅干模具，能夠將普通的矩形框轉變為圓形、三角形、星形或任何自定義形狀——僅需一行CSS代碼。

這種技術為創意設計開啟了新可能：無需依賴圖片、SVG包裝或外部工具，就能實現精致的頭像剪裁效果，或創建懸停時展現的個性鏤空效果。但要真正掌握它，我們需要先理解其構成原理。

語法背后的核心概念

"clip"的新定義

與傳統CSS中的overflow: hidden不同：

• overflow裁剪的是元素內容（作用于padding-box或overflow clip edge）
• clip-path裁剪的是元素本身（包括box-shadow和outline等樣式）

重要特性：

• 純二維操作，會忽略transform-style: preserve-3d
• 任何3D變換都將被限制在元素平面內

"path"的精髓

路徑不是簡單的坐標集合，而是有序的連接軌跡。就像兒童玩的"連點成圖"游戲，坐標點的順序直接決定最終形狀。

黑色背景上的恐龍連線圖，帶有編號的連續點陣

坐標系統詳解

支持兩種坐標單位：

• 絕對單位（如px）：固定尺寸，精確控制
• 相對單位（如%）：響應式適應元素尺寸

默認以元素的border-box為坐標系：

• 原點0 0位于左上角
• X軸向右延伸，Y軸向下延伸

提示：可通過<geometry-box>參數指定其他參考框（如padding-box）

基礎形狀實戰

圓形裁剪 circle()

語法結構：

clip-path: circle(半徑 at 圓心位置);

半徑單位靈活：

• 固定值：50px
• 百分比：30%
• 視窗單位：10vw
• 智能關鍵詞：

closest-side：到最近邊的距離

farthest-side：到最遠邊的距離

圓心定位技巧：

• 關鍵詞組合：top right、center left等
• 精確坐標：at 25% 75%

橢圓變形 ellipse()

擴展自圓形，增加Y軸半徑：

clip-path: ellipse(水平半徑 垂直半徑 at 圓心);

通過獨立控制兩個半徑，可創造從扁平到細高的各種橢圓形態。

矩形裁剪三劍客

• inset()內凹裁剪，類似反向padding：

clip-path: inset(上 右 下 左);

• rect()傳統矩形定位（源自已廢棄的clip屬性）：

clip-path: rect(上邊 右邊 下邊 左邊);

• xywh()現代矩形定義法：

clip-path: xywh(X坐標 Y坐標 寬度 高度);

多邊形魔法 polygon()

通過坐標點序列構建任意多邊形：

clip-path: polygon(x1 y1, x2 y2, x3 y3,...);

關鍵特性：

• 點序決定形狀（相同坐標不同順序可產生星形/五邊形）
• 支持混合單位（px/%）
• 實時編輯工具可快速生成代碼

進階曲線造型

SVG路徑 path()

直接使用SVG路徑語法：

clip-path: path("M10,10 L50,10 L50,50 Z");

優勢：

• 支持所有SVG繪圖命令（貝塞爾曲線等）
• 像素級精度控制

局限：

• 僅支持絕對單位
• 缺乏響應式能力

現代形狀 shape()

CSS原生曲線解決方案：

clip-path: shape(
  from 50% 89%,
  line to 43.95% 83.5%,
  curve to 8.35% 35.5% with 22.5% 64% / 8.35% 51%,
  ...
  close
);

核心優勢：

• 百分比單位支持
• 響應式自適應
• 更符合CSS習慣的語法

填充規則的藝術

自相交圖形處理策略：

從靜態到動態

本文探索了如何用clip-path重塑界面形態，但這僅僅是路徑技術的開始。在即將到來的第二部分中，我們將解鎖offset-path的潛能——讓元素沿著自定義軌跡靈動起舞，將靜態形狀轉化為生動表達。

最小阻力的路徑，即將展現更迷人的可能性。

原文地址：https://frontendmasters.com/blog/the-path-of-least-resistance-part-1/作者：Amit Sheen