CSS Clip-Path 圖片裁切

clip-path 是 CSS 屬性可以把圖片遮住、隱藏部分不希望被看到，因為載入到網頁的圖片都會是矩形的，所以用 clip-path 裁切簡單的幾何形或是使用SVG 、 path 路徑畫出裁切外框。

裁切範圍

範圍可以是裁切圖形的範圍，也可以向外延伸。

使用的是 HTML 元素時， geometry-box 可以設定 margin-box, border-box, padding-box, content-box 並配合 margin 、padding 向外放大遮住可見的範圍。

使用 SVG 元素時，值可以使用 fill-box, stroke-box, view-box 。

clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

裁切形狀

inset 向內裁切

inset 內的值可設定 ( 上下 左右 ) 、( 上 右 下 左 ) 兩種

clip-path: inset(100px 50px);
clip-path: inset(100px 50px 100px 50px);

還可以設定圓角 ( 邊距 round 圓角 )

clip-path: inset(100px 50px 100px 50px round 20px 10px 15px 25px);
clip-path: inset(100px 50px 100px 50px round 20px);

circle 圓形

值為 ( 半徑 at 圓心 X Y 座標 )

clip-path: circle(100px at 125px 125px);

ellipse 橢圓形

值為 ( X 、Y 軸半徑 at 圓心座標 )

clip-path: ellipse(65px 30px at 125px 40px);

polygon 多邊形

polygon 可裁切多邊形，當設定三個點時就會裁切成三角形

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

四方形就是設定四個點

clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

五邊形設定五個點

clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

六邊形、七邊形… 等，設定點的位置並依順序連成一個範圍後裁切。

而 polygon 是依照點的順序連線形成範圍，所以可以切出像星星

clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

組合裁切設定

裁切線位置 + 形狀 可合併寫在一行。

clip-path: padding-box circle(50px at 0 100px);

使用圖片範圍裁切

CSS 載入裁切範圍

可直接使用 path() 畫出範圍，但這方法目前只能在 Firefox 觀看到效果，在不支援的瀏覽器中只會看到一個正方形。

clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

HTML 載入 SVG 裁切範圍

HTML 載入 SVG 的圖作為裁切的範圍

<svg>
  <clipPath id="myPath" clipPathUnits="objectBoundingBox">
    <path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" />
  </clipPath>
</svg>

在 CSS 執行裁切

clip-path: url(#myPath)

參考文件

CSS clip-path property - W3Schools

clip-path - CSS | MDN

clip-path | CSS-Tricks

線上工具 Clippy