CSS 資料型別 - <basic-shape>

CSS <basic-shape> 資料型別定義了用於諸如 clip-path、shape-outside 和 offset-path 等屬性的不同形狀。

可能的值

inset() − 表示內嵌矩形。
circle() − 表示具有給定半徑和位置的圓形。
ellipse() − 表示具有給定半徑和位置的橢圓形。
polygon() − 透過將頂點定義為座標和 SVG fill-rule 來表示多邊形。
path() − 使用 SVG 路徑資料和 SVG fill-rule 定義自定義剪下路徑。

語法

clip-path: inset( <length-percentage>{1,4} [ round <`border-radius`> ]? )
clip-path: circle( <shape-radius>? [ at <position> ]?);
clip-path: ellipse([ <shape-radius>{2} ]? [ at <position> ]?);
clip-path: polygon( <fill-rule>? [ <shape-arg> <shape-arg> ]# );
clip-path: path(  [ <fill-rule>, ]? <string> );

基本形狀的計算值

<basic-shape> 函式計算指定的值，但以下情況除外

省略的值將包含在內，並使用其預設值進行計算。
在 circle() 或 ellipse() 中，<position> 值由從左上角原點開始的一對偏移量（水平和垂直）確定，每個偏移量都指定為絕對長度和百分比的組合。
Inset() 將 <border-radius> 值計算為所有八個 <length> 或百分比值的擴充套件列表。

基本形狀的插值

在兩個 <basic-shape> 元素之間進行動畫時，插值遵循以下規則：形狀函式中的值作為包含 <length>、<percentage> 或 calc() 元素的列表進行插值。如果列表值不是這些型別但相同，則將插值。

兩個形狀的參考框必須相同。
當兩個形狀屬於同一型別（例如 ellipse() 或 circle()），並且沒有半徑使用 closest-side 或 farthest-side 關鍵字時，則在形狀函式內的每個值之間進行插值。
如果兩個形狀都是 inset() 型別，則在形狀函式中的值之間進行插值。
當兩個形狀都是 polygon() 型別，具有相同數量的頂點，並使用相同的 <fill-rule> 時，則在形狀函式中的值之間進行插值。
當兩個形狀都屬於同一 path() 型別，並且具有相同數量和型別的路徑資料命令，並且順序相同，則將每個路徑資料命令插值為實數。
在任何其他情況下，都不使用插值。

CSS <basic-shape> - inset()

以下示例演示了 clip-path: inset(10% 10% 10% 10% round 10px 10px) 屬性的用法，該屬性建立一個具有圓角的正方形：

<html>
<head>
<style>
   .clip-inset {
      width: 150px;
      height: 150px;
      background-color: red;
      clip-path: inset(10% 10% 10% 10% round 10px 10px);
   }
</style>
</head>
<body>
   <div class="clip-inset"></div>
</body>
</html>

CSS <basic-shape> - circle()

以下示例演示了 clip-path: circle(50% at 50% 50%) 屬性的用法，該屬性建立一個半徑為元素大小 50% 的圓形：

<html>
<head>
<style>
   .clip-circle {
      width: 150px;
      height: 150px;
      background-color: red;
      clip-path: circle(50% at 50% 50%);
   }
</style>
</head>
<body>
   <div class="clip-circle"></div>
</body>
</html>

CSS <clip-path> - ellipse()

以下示例演示了 clip-path: ellipse(75px 40px at 50% 40%) 屬性的用法，該屬性建立一個橢圓形：

<html>
<head>
<style>
   .clip-ellipse {
      width: 150px;
      height: 150px;
      background-color: red;
      clip-path:  ellipse(75px 40px at 50% 40%);
   }
</style>
</head>
<body>
   <div class="clip-ellipse"></div>
</body>
</html>

CSS <clip-path> - polygon()

以下示例演示了 clip-path: polygon() 屬性的用法，該屬性使用座標建立一個多邊形剪下路徑：

<html>
<head>
<style>
   .clip-polygon {
      width: 150px;
      height: 150px;
      background-color: red;
      clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);
   }
</style>
</head>
<body>
   <div class="clip-polygon"></div>
</body>
</html>

CSS <clip-path> - path()

以下示例演示瞭如何使用 path() 與 clip-path 屬性結合使用，以使用 SVG 路徑資料定義自定義剪下路徑：

<html>
<head>
<style>
   .clip-area {
      width: 150px;
      height: 150px;
      background-color: red;
      clip-path: path('M 150 150 L 0, 100 L 200,100 z');
   }
</style>
</head>
<body>
   <div class="clip-area"></div>
</body>
</html>

CSS 動畫多邊形

以下示例演示瞭如何使用 @keyframes @規則來動畫形狀，以及形狀的過渡。clip-path 屬性有助於將形狀從一種形式更改為另一種形式：

<html>
<head>
<style>
   .clip-polygon {
      width: 150px;
      height: 150px;
      background: blue;
      clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
      animation: 4s poly infinite alternate ease-in-out;
   }
   @keyframes poly {
      from {
         clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
      }
      to {
         clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0);
      }
   }
</style>
</head>
<body>
   <div class="clip-polygon"></div>
</body>
</html>

列印頁面