搜尋

CSS 形狀與線段 ( 函式類型 )

進行 CSS 的動畫或裁切效果時，有時會用到「形狀」或「線段」相關 CSS 函式，這些函式有 circle()、rect()、ellipse()、ray()、inset()、polygon()、和 xywh() 等，透過這些函式的操作，可以讓 CSS 更有特色更具變化，這篇教學會介紹這些有趣的 CSS 函式。

延伸閱讀：CSS 路徑 path ( 函式類型 )

CSS 教學 - CSS 形狀與線段 ( 函式類型 )

「形狀與線段」的 CSS 函式

下方列出「形狀與路徑」類型的 CSS 函式 ( 目前主流瀏覽器都支援 )，基本上都會搭配動畫和裁切才會有實際效果。

參考：裁切路徑 clip-path、自訂動畫路徑 offset

形狀與路徑函式 說明 裁切路徑 自訂動畫路徑
circle() 圓形 O O
ellipse() 橢圓形 O O
rect() 四邊形 O O
polygon() 多邊形 O O
inset() 內縮邊距和圓角 O O
xywh() 虛擬矩形 O O
ray() 放射線形狀 X O

circle() 圓形

circle() 是「圓形」CSS 函式，可以產生一個「封閉」的圓形路徑，具有下列參數：

參數 說明 是否必填
r 半徑，使用長度單位數值。 必填
cx cy 搭配 at 定義圓心位置，使用長度單位數值或位置關鍵字。 選填，預設使用 center center。

circle() 支援下列幾種寫法：

/* 裁切路徑 */
div {
  clip-path: circle(50px);                /* 半徑 50px，圓心 xy 為 center center */
  clip-path: circle(50px at 50px 50px);   /* 半徑 50px，圓心 xy 為 50px 50px */
  clip-path: circle(closest-side);        /* 半徑是從中心到父元素最近的長度 */
  clip-path: circle(farthest-side);       /* 半徑是從中心到父元素最遠的長度 */
}
/* 動畫路徑 */
div {
  offset-path: circle(50px);              /* 半徑 50px，圓心 xy 為 center center */
  offset-path: circle(50px at 50px 50px); /* 半徑 50px，圓心 xy 為 50px 50px */
  offset-path: circle(closest-side);      /* 半徑是從中心到父元素最近的長度 */
  offset-path: circle(farthest-side);     /* 半徑是從中心到父元素最遠的長度 */
}

下方的範例執行後，前兩個 div 會裁切出圓形，後兩個 div 則會出現繞著圓形路徑移動的動畫。

線上展示：https://codepen.io/oxxo/pen/NPKXQmN

<!-- HTML 程式碼 -->
<div class="a"><div></div></div>
<div class="b"><div></div></div>
<div class="c"><div></div></div>
<div class="d"><div></div></div>

<!-- CSS 程式碼 -->
<style>
  div[class] {
    width: 200px;
    height:150px;
    border: 1px solid #000;
    margin: 10px;
    float: left;
  }
  /* 前兩個 div 跟父元素一樣大，背景紅色 */
  .a div, .b div {
    width: 200px;
    height: 150px;
    background: red;
  }
  .a div{clip-path: circle(50px at center center);} /* 裁切半徑 50px 圓形 */
  .b div{clip-path: circle(100px at 0 50px);}       /* 裁切半徑 100px 圓形 */

  /* 後兩個 div 跟父元素只有 25px，背景綠色 */
  .c div, .d div {
    width: 25px;
    height: 25px;
    background: green;
  }
  .c div{
    width: 30px;
    height: 30px;
    offset-path: circle(50px at center center); /* 動畫路徑為半徑 50px 圓形 */
    animation: oxxo 1s linear infinite;         /* 執行動畫 */
  }
  .d div{
    offset-path: circle(20px);                  /* 動畫路徑為半徑 20px 圓形 */
    animation: oxxo 1s linear infinite;         /* 執行動畫 */
  }
  @keyframes oxxo{
    0% {offset-distance: 0%;}                   /* 改變移動距離 */
    100% {offset-distance: 100%;}               /* 改變移動距離 */
  }
</style>

CSS 教學 - CSS 形狀與線段 ( 函式類型 ) - circle() 圓形路徑，搭配裁切和動畫

ellipse() 橢圓形

ellipse() 是「橢圓形」CSS 函式，可以產生一個「封閉」的橢圓形路徑，具有下列的參數：

參數 說明 是否必填
rx x 軸半徑，使用長度單位數值。 必填
ry y 軸半徑，使用長度單位數值。 必填
cx cy 搭配 at 定義圓心位置，使用長度單位數值或位置關鍵字。 選填，預設使用 center center。

ellipse() 支援下列幾種寫法：

/* 裁切路徑 */
div {
  clip-path: ellipse(20px 50px);                /* x 軸半徑 20px，y 軸半徑 50px，圓心 xy 為 center center */
  clip-path: ellipse(20px 50px at 20px 50px);   /* x 軸半徑 20px，y 軸半徑 50px，圓心 xy 為 20px 50px */
  clip-path: ellipse(closest-side 50px);        /* x 半徑是從中心到父元素最近的長度，y 軸半徑 50px */
  clip-path: ellipse(farthest-side 50px);       /* x 半徑是從中心到父元素最遠的長度，y 軸半徑 50px */
}
/* 動畫路徑 */
div {
  offset-path: ellipse(20px 50px);              /* x 軸半徑 20px，y 軸半徑 50px，圓心 xy 為 center center */
  offset-path: ellipse(20px 50px at 20px 50px); /* x 軸半徑 20px，y 軸半徑 50px，圓心 xy 為 20px 50px */
  offset-path: ellipse(closest-side 50px);      /* x 半徑是從中心到父元素最近的長度，y 軸半徑 50px */
  offset-path: ellipse(farthest-side 50px);     /* x 半徑是從中心到父元素最遠的長度，y 軸半徑 50px */
}

下方的範例執行後，前兩個 div 會裁切出橢圓形，後兩個 div 則會出現繞著橢圓形路徑移動的動畫。

線上展示：https://codepen.io/oxxo/pen/VYZQZZR

<!-- HTML 程式碼 -->
<div class="a"><div></div></div>
<div class="b"><div></div></div>
<div class="c"><div></div></div>
<div class="d"><div></div></div>

<!-- CSS 程式碼 -->
<style>
  div[class] {
    width: 200px;
    height:150px;
    border: 1px solid #000;
    margin: 10px;
    float: left;
  }

  /* 前兩個 div 跟父元素一樣大，背景紅色 */
  .a div, .b div {
    width: 200px;
    height:150px;
    background: red;
  }
  .a div{clip-path: ellipse(10px 50px at center center);}   /* x 軸半徑 10px，y 軸半徑 50px，圓心置中 */
  .b div{clip-path: ellipse(farthest-side 20px at 0 50px);} /* x 軸半徑 100px ( 200/2 )，y 軸半徑 50px，圓心 0 50px */

  /* 後兩個 div 跟父元素只有 25px，背景綠色 */
  .c div, .d div {
    width: 25px;
    height: 25px;
    background: green;
  }
  .c div{
    width: 30px;
    height: 30px;
    offset-path: ellipse(10px 50px at center center); /* x 軸半徑 10px，y 軸半徑 50px，圓心置中 */
    animation: oxxo 1s linear infinite;         /* 執行動畫 */
  }
  .d div{
    offset-path: ellipse(closest-side 50px);    /* x 軸半徑 75px ( 150/2 )，y 軸半徑 50px，圓心置中 */
    animation: oxxo 1s linear infinite;         /* 執行動畫 */
  }
  @keyframes oxxo{
    0% {offset-distance: 0%;}                   /* 改變移動距離 */
    100% {offset-distance: 100%;}               /* 改變移動距離 */
  }
</style>

CSS 教學 - CSS 形狀與線段 ( 函式類型 ) - ellipse() 橢圓形路徑，搭配裁切和動畫

rect() 四邊形

rect() 是「四邊形」CSS 函式，可以產生一個「封閉」的四邊形路徑，具有下列幾個參數 ( 撰寫時需要按照下表，從上而下的順序，主要都是針對元素的上緣和左側 )：

參數 說明 是否必填
dt 路徑上緣與「元素上緣」的距離，使用長度單位數值，使用 auto 表示碰觸元素上緣。 必填
dr 路徑右側與「元素左側」的距離，使用長度單位數值，使用 auto 表示碰觸元素右側。 必填
db 路徑下緣與「元素上緣」的距離，使用長度單位數值，使用 auto 表示碰觸元素下緣。 必填
dl 路徑左側與「元素左側」的距離，使用長度單位數值，使用 auto 表示碰觸元素左側。 必填
radius 搭配 round 定義四個角落圓角半徑，一個數值為四個角落，兩個數值為「左上右下，右上左下」，三個數值為「左上，右上左下，右下」，四個數值為「左上，右上，右下，左下」。 選填，預設 0。

rect() 支援下列幾種寫法：

/* 裁切路徑 */
div {
  clip-path: rect(0 100px 100px 50px);
   /* 高 100px 寬 50px 位置往右偏移 50px 的四邊形 */

  clip-path: rect(20px 100px 100px 50px);
  /* 高 80px 寬 50px 位置往下偏移 20px 往右偏移 50px 的四邊形 */

  clip-path: rect(20px 100px 100px 50px round 10px 20px 30px 40px);  
  /* 高 80px 寬 50px 位置往下偏移 20px 往右偏移 50px 的四邊形，左上到左下順時針的圓角半徑為 10px 20px 30px 40px*/

  clip-path: rect(20px 100px 100px 50px round 10px 40px);
  /* 高 80px 寬 50px 位置往下偏移 20px 往右偏移 50px 的四邊形，左上右下圓角半徑為 10px 右上左下圓角半徑為 40px*/
}
/* 動畫路徑 */
div {
  offset-path: rect(0 100px 100px 50px);
  /* 高 100px 寬 50px 位置往右偏移 50px 的四邊形 */

  offset-path: rect(20px 100px 100px 50px);
  /* 高 80px 寬 50px 位置往下偏移 20px 往右偏移 50px 的四邊形 */

  offset-path: rect(20px 100px 100px 50px round 10px 20px 30px 40px);  
  /* 高 80px 寬 50px 位置往下偏移 20px 往右偏移 50px 的四邊形，左上到左下順時針的圓角半徑為 10px 20px 30px 40px*/

  offset-path: rect(20px 100px 100px 50px round 10px 40px);
  /* 高 80px 寬 50px 位置往下偏移 20px 往右偏移 50px 的四邊形，左上右下圓角半徑為 10px 右上左下圓角半徑為 40px*/
}

下方的範例執行後，前兩個 div 會裁切出四邊形，後兩個 div 則會出現繞著四邊形路徑移動的動畫。

線上展示：https://codepen.io/oxxo/pen/ByBYBLz

<!-- HTML 程式碼 -->
<div class="a"><div></div></div>
<div class="b"><div></div></div>
<div class="c"><div></div></div>
<div class="d"><div></div></div>

<!-- CSS 程式碼 -->
<style>
  div[class] {
    width: 200px;
    height:150px;
    border: 1px solid #000;
    margin: 10px;
    float: left;
  }
  /* 前兩個 div 跟父元素一樣大，背景紅色 */
  .a div, .b div {
    width: 200px;
    height: 150px;
    background: red;
  }
  .a div{clip-path: rect(20px 150px 100px 50px);}                 /* 裁切四邊形 */
  .b div{clip-path: rect(50px 150px 100px 50px round 5px 30px);}  /* 裁切四邊形 */      /* 裁切半徑 100px 圓形 */

  /* 後兩個 div 跟父元素只有 25px，背景綠色 */
  .c div, .d div {
    width: 25px;
    height: 25px;
    background: green;
  }
  .c div{
    width: 30px;
    height: 30px;
    offset-path: rect(20px 150px 100px 50px);   /* 動畫路徑為四邊形 */
    animation: oxxo 1s linear infinite;         /* 執行動畫 */
  }
  .d div{
    offset-path: rect(50px 150px 100px 50px round 5px 30px);  /* 動畫路徑為四邊形 */
    animation: oxxo 1s linear infinite;         /* 執行動畫 */
  }
  @keyframes oxxo{
    0% {offset-distance: 0%;}                   /* 改變移動距離 */
    100% {offset-distance: 100%;}               /* 改變移動距離 */
  }
</style>

CSS 教學 - CSS 形狀與線段 ( 函式類型 ) - rect() 四邊形路徑，搭配裁切和動畫

polygon() 多邊形

polygon() 是「多邊形」CSS 函式，可以產生一個「封閉」的多邊形路徑，至少必須具有「三個座標點」，座標可使用長度單位數值 ( 常用百分比單位 )，初學者建議透過「CSS clip-path maker」這個網站，快速產生裁切形狀所需的座標位置。

前往：CSS clip-path maker

CSS clip-path maker

polygon() 相關寫法如下：

/* 裁切路徑 */
div {
  clip-path: polygon(0% 100%, 50%  0%,100% 100%);       /* 三角形 */
  clip-path: polygon(0% 0%,100% 0%,100% 100%, 0% 100%); /* 正方形 */
}
/* 動畫路徑 */
div {
  offset-path: polygon(0% 100%, 50%  0%,100% 100%);       /* 三角形 */
  offset-path: polygon(0% 0%,100% 0%,100% 100%, 0% 100%); /* 正方形 */
}

下方的範例執行後，前兩個 div 會裁切出三角形和矩形，後兩個 div 則會出現繞著三角形和矩形的動畫。

線上展示：https://codepen.io/oxxo/pen/raBJGZZ

<!-- HTML 程式碼 -->
<div class="a"><div></div></div>
<div class="b"><div></div></div>
<div class="c"><div></div></div>
<div class="d"><div></div></div>

<!-- CSS 程式碼 -->
<style>
  div[class] {
    width: 200px;
    height:150px;
    border: 1px solid #000;
    margin: 10px;
    float: left;
  }

  /* 前兩個 div 跟父元素一樣大，背景紅色 */
  .a div, .b div {
    width: 200px;
    height:150px;
    background: red;
  }
  .a div{clip-path: polygon(0% 100%, 50%  0%,100% 100%); }      /* 三角形 */
  .b div{clip-path: polygon(20% 20%,80% 20%,80% 80%, 20% 80%);} /* 矩形 */

  /* 後兩個 div 跟父元素只有 25px，背景綠色 */
  .c div, .d div {
    width: 25px;
    height: 25px;
    background: green;
  }
  .c div{
    width: 30px;
    height: 30px;
    offset-path: polygon(0% 100%, 50%  0%,100% 100%);        /* 三角形 */
    animation: oxxo 1s linear infinite;                      /* 執行動畫 */
  }
  .d div{
    offset-path: polygon(20% 20%,80% 20%,80% 80%, 20% 80%);  /* 矩形 */
    animation: oxxo 1s linear infinite;                      /* 執行動畫 */
  }
  @keyframes oxxo{
    0% {offset-distance: 0%;}     /* 改變移動距離 */
    100% {offset-distance: 100%;} /* 改變移動距離 */
  }
</style>

CSS 教學 - CSS 形狀與線段 ( 函式類型 ) - polygon() 多邊形路徑，搭配裁切和動畫

inset() 內縮邊距和圓角

inset() 是「元素內縮邊距和圓角」CSS 函式，可以產生一個類似元素但尺寸內縮的「封閉」路徑，具有下列參數：

參數 說明 是否必填
length 內縮距離，一個數值為「上下左右」，兩個數值為「上下、左右」，三個數值為「上、左右、下」，四個數值為「上、右、下、左」。 必填
radius 搭配 round 定義四個角落圓角半徑，一個數值為四個角落，兩個數值為「左上右下，右上左下」，三個數值為「左上，右上左下，右下」，四個數值為「左上，右上，右下，左下」。 選填，預設 0。

inset() 支援下列幾種寫法：

/* 裁切路徑 */
div {
  clip-path: inset(20px);                  /* 四個邊內縮 20px */
  clip-path: inset(20px 50px);             /* 上下內縮 20px，左右內縮 50px */
  clip-path: inset(20px 50px round 10px);  /* 上下內縮 20px，左右內縮 50px，四個角圓角半徑 10px */
  clip-path: inset(10px 20px 30px 40px round 10px 20px 30px 40px);      
  /* 上右下左分別內縮 10px 20px 30px 40px，從左上角開始順時針的圓角半徑 10px 20px 30px 40px */
}
/* 動畫路徑 */
div {
  offset-path: inset(20px);                  /* 四個邊內縮 20px */
  offset-path: inset(20px 50px);             /* 上下內縮 20px，左右內縮 50px */
  offset-path: inset(20px 50px round 10px);  /* 上下內縮 20px，左右內縮 50px，四個角圓角半徑 10px */
  offset-path: inset(10px 20px 30px 40px round 10px 20px 30px 40px);      
  /* 上右下左分別內縮 10px 20px 30px 40px，從左上角開始順時針的圓角半徑 10px 20px 30px 40px */
}

下方的範例執行後，前兩個 div 會裁切出內縮圖形，後兩個 div 則會出現繞著內縮路徑移動的動畫。

線上展示：https://codepen.io/oxxo/pen/yyBvzwE

<!-- HTML 程式碼 -->
<div class="a"><div></div></div>
<div class="b"><div></div></div>
<div class="c"><div></div></div>
<div class="d"><div></div></div>

<!-- CSS 程式碼 -->
<style>
  div[class] {
    width: 200px;
    height:150px;
    border: 1px solid #000;
    margin: 10px;
    float: left;
  }

  /* 前兩個 div 跟父元素一樣大，背景紅色 */
  .a div, .b div {
    width: 200px;
    height:150px;
    background: red;
  }
  .a div{clip-path: inset(40px 10px); }   /* 上下內縮 40px，左右內縮 10px */
  .b div{clip-path: inset(10px 20px 30px 40px round 10px 20px 30px 40px);}
  /* 上右下左分別內縮 10px 20px 30px 40px，從左上角開始順時針的圓角半徑 10px 20px 30px 40px */

  /* 後兩個 div 跟父元素只有 25px，背景綠色 */
  .c div, .d div {
    width: 25px;
    height: 25px;
    background: green;
  }
  .c div{
    width: 30px;
    height: 30px;
    offset-path: inset(40px 10px);         /* 上下內縮 40px，左右內縮 10px */
    animation: oxxo 1s linear infinite;    /* 執行動畫 */
  }
  .d div{
    offset-path: inset(10px 20px 30px 40px round 10px 20px 30px 40px); 
  /* 上右下左分別內縮 10px 20px 30px 40px，從左上角開始順時針的圓角半徑 10px 20px 30px 40px */
    animation: oxxo 1s linear infinite;    /* 執行動畫 */
  }
  @keyframes oxxo{
    0% {offset-distance: 0%;}              /* 改變移動距離 */
    100% {offset-distance: 100%;}          /* 改變移動距離 */
  }
</style>

CSS 教學 - CSS 形狀與線段 ( 函式類型 ) - inset() 內縮邊距和圓角路徑，搭配裁切和動畫

xywh() 虛擬矩形

xywh() 是「虛擬矩形」CSS 函式，可以產生一個「封閉」的四邊形路徑，和 rect() 最大的差異在於 rect() 是根據元素邊緣定義四個邊的位置，而 xywh() 是根據左上角的 xy 座標與長寬尺寸來產生四邊形，具有下列幾個參數：

參數 說明 是否必填
x 左上角 x 座標 ( 相對父元素 )。 必填
y 左上角 y 位置 ( 相對父元素 )。 必填
w 寬度。 必填
h 高度。 必填
radius 搭配 round 定義四個角落圓角半徑，一個數值為四個角落，兩個數值為「左上右下，右上左下」，三個數值為「左上，右上左下，右下」，四個數值為「左上，右上，右下，左下」。 選填，預設 0。

xywh() 支援下列幾種寫法：

/* 裁切路徑 */
div {
  clip-path: xywh(50px 50px 100px 50px);
   /* 位於父元素 50px 50px 位置的 100px x 50px 四邊形 */

  clip-path: xywh(20px 100px 100px 50px round 20px);
   /* 位於父元素 50px 50px 位置的 100px x 50px 四邊形，四個圓角半徑為 20px */

  clip-path: xywh(20px 100px 100px 50px round 10px 20px 30px 40px);
   /* 位於父元素 50px 50px 位置的 100px x 50px 四邊形，左上到左下順時針的圓角半徑為 10px 20px 30px 40px */
}
/* 動畫路徑 */
div {
  offset-path: xywh(50px 50px 100px 50px);
   /* 位於父元素 50px 50px 位置的 100px x 50px 四邊形 */

  offset-path: xywh(20px 100px 100px 50px round 20px);
   /* 位於父元素 50px 50px 位置的 100px x 50px 四邊形，四個圓角半徑為 20px */

  offset-path: xywh(20px 100px 100px 50px round 10px 20px 30px 40px);
   /* 位於父元素 50px 50px 位置的 100px x 50px 四邊形，左上到左下順時針的圓角半徑為 10px 20px 30px 40px */
}

下方的範例執行後，前兩個 div 會裁切出四邊形，後兩個 div 則會出現繞著四邊形路徑移動的動畫。

線上展示：https://codepen.io/oxxo/pen/vEBdWBG

<!-- HTML 程式碼 -->
<div class="a"><div></div></div>
<div class="b"><div></div></div>
<div class="c"><div></div></div>
<div class="d"><div></div></div>

<!-- CSS 程式碼 -->
<style>
  div[class] {
    width: 200px;
    height:150px;
    border: 1px solid #000;
    margin: 10px;
    float: left;
  }

  /* 前兩個 div 跟父元素一樣大，背景紅色 */
  .a div, .b div {
    width: 200px;
    height:150px;
    background: red;
  }
  .a div{clip-path: xywh(100px 50px 50px 50px); }   /* 位於 100px 50px 長寬為 50px 的正方形 */
  .b div{clip-path: xywh(10px 20px 150px 60px round 10px 20px 30px 40px);} 
  /* 位於 10px 20px 長寬為 150px 60px 的矩形，圓角為  10px 20px 30px 40px*/

  /* 後兩個 div 跟父元素只有 25px，背景綠色 */
  .c div, .d div {
    width: 25px;
    height: 25px;
    background: green;
  }
  .c div{
    width: 30px;
    height: 30px;
    offset-path: xywh(100px 50px 50px 50px);    /* 位於 100px 50px 長寬為 50px 的正方形 */
    animation: oxxo 1s linear infinite;         /* 執行動畫 */
  }
  .d div{
    offset-path: xywh(10px 20px 150px 60px round 10px 20px 30px 40px);   
    /* 位於 10px 20px 長寬為 150px 60px 的矩形，圓角為  10px 20px 30px 40px*/
    animation: oxxo 1s linear infinite;         /* 執行動畫 */
  }
  @keyframes oxxo{
    0% {offset-distance: 0%;}                   /* 改變移動距離 */
    100% {offset-distance: 100%;}               /* 改變移動距離 */
  }
</style>

CSS 教學 - CSS 形狀與線段 ( 函式類型 ) - xywh() 虛擬矩形路徑，搭配裁切和動畫

ray() 放射線

ray() 是「放射線」CSS 函式，可以產生一條指定角度的放射線路徑，使用 ray() 要特別注意，因為「不是封閉形狀」，所以並不適用 clip-path 樣式屬性，具有下列幾個參數：

參數 說明 是否必填
angle 旋轉角度，使用角度單位數值，正上方為 0deg，順時針旋轉角度增加。 必填
size 只能使用下方列出的特定關鍵字。 選填，預設 closest-side。
contain 填入「contain」後，size 會減少元素最大邊長的一半。 選填
cx cy 搭配 at 定義圓心位置，使用長度單位數值或位置關鍵字。 選填，預設使用 center center。

參數 size 可使用下方的關鍵字：

關鍵字 說明
closest-side 起點和最短邊距離。
closest-corner 起點和最近的角落距離。
farthest-side 起點和最遠邊距離。
farthest-corner 起點和最遠的角落距離。
sides 起點和放射線碰到邊緣的距離。

ray() 支援下列幾種寫法：

/* 動畫路徑 */
div {
  offset-path: ray(30deg);
  /* 起點位於父元素中心點，往右上角 30deg size 為 closest-side 的放射線 */

  offset-path: ray(30deg sides);
  /* 起點位於父元素中心點，往右上角 30deg size 為 sides 的放射線 */

  offset-path: ray(30deg farthest-corner contain);
  /* 起點位於父元素中心點，往右上角 30deg size 為 farthest-corner 但最大值為寬度一半的放射線 */

  offset-path: ray(30deg farthest-corner contain at 50px 50px);
  /* 起點位於父元素 (50px, 50px)，往右上角 30deg size 為 farthest-corner 但最大值為寬度一半的放射線 */
}

下方的範例呈現 ray() 設定不同 size 的差異。

線上展示：https://codepen.io/oxxo/pen/XJrZejE

<!-- HTML 程式碼 -->
<div class="a"><div>1</div></div>
<div class="b"><div>2</div></div>
<div class="c"><div>3</div></div>
<div class="d"><div>4</div></div>
<div class="e"><div>5</div></div>

<!-- CSS 程式碼 -->
<style>
  div[class] {
    width: 100px;
    height:200px;
    border: 1px solid #000;
    margin: 30px;
    float: left;
  }
  div div {
    width: 25px;
    height: 25px;
    background: orange;
    offset-distance: 100%;  /* 移動到路徑末端 */
    text-align: center;
  }
  .a div{offset-path: ray(150deg closest-side at 50px 50px);}
  .b div{offset-path: ray(150deg closest-corner at 50px 50px);}
  .c div{offset-path: ray(150deg farthest-side at 50px 50px);}
  .d div{offset-path: ray(150deg farthest-corner at 50px 50px);}
  .e div{offset-path: ray(150deg sides at 50px 50px);}
</style>

CSS 教學 - CSS 形狀與線段 ( 函式類型 ) - ray() 設定不同 size 的差異

下方的範例會將 ray() 的 size 加上 contain 關鍵字，長度就會縮減元素最大寬度 ( 或高度 ) 的一半。

線上展示：https://codepen.io/oxxo/pen/zxOREzL

<!-- HTML 程式碼 -->
<div class="a"><div>1</div></div>
<div class="b"><div>2</div></div>
<div class="c"><div>3</div></div>
<div class="d"><div>4</div></div>

<!-- CSS 程式碼 -->
<style>
  div[class] {
    width: 100px;
    height:200px;
    border: 1px solid #000;
    margin: 20px;
    float: left;
  }
  div div {
    width: 25px;
    height: 100px;
    background: orange;
    offset-distance: 100%;  /* 移動到路徑末端 */
    text-align: center;
  }
  .a div{offset-path: ray(150deg farthest-side);}
  .b div{offset-path: ray(150deg farthest-side contain);}
  .c div{offset-path: ray(150deg farthest-corner);}
  .d div{offset-path: ray(150deg farthest-corner contain);}
</style>

CSS 教學 - CSS 形狀與線段 ( 函式類型 ) - ray() 的 size 加上 contain

下方的範例執行後，會使用 animation 搭配 ray() 實作 CSS 動畫。

線上展示：https://codepen.io/oxxo/pen/ByBYwwz

<!-- HTML 程式碼 -->
<div class="a"><div>1</div></div>
<div class="b"><div>2</div></div>
<div class="c"><div>3</div></div>
<div class="d"><div>4</div></div>
<div class="e"><div>4</div></div>

<!-- CSS 程式碼 -->
<style>
  div[class] {
    width: 100px;
    height:200px;
    border: 1px solid #000;
    margin: 20px;
    float: left;
  }
  div div {
    width: 25px;
    height: 25px;
    background: orange;
    text-align: center;
    animation: oxxo 1s infinite alternate;
  }
  .a div{offset-path: ray(150deg closest-side at 50px 50px);}
  .b div{offset-path: ray(150deg closest-corner at 50px 50px);}
  .c div{offset-path: ray(150deg farthest-side at 50px 50px);}
  .d div{offset-path: ray(150deg farthest-corner at 50px 50px);}
  .e div{offset-path: ray(150deg sides at 50px 50px);}

  @keyframes oxxo {
    0% {offset-distance: 0%;}
    100% {offset-distance: 100%;}
  }
</style>

CSS 教學 - CSS 形狀與線段 ( 函式類型 ) - 使用 ray() 作 CSS 動畫

小結

「形狀與線段」相關的 CSS 函式最主要都是應用在「裁切」和「動畫」，可以很簡單的呈現許多不同的效果，如果在過去有一些無法實現的 CSS 效果，趕快用「形狀與線段」相關的 CSS 函式試試看吧。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則 CSS 常用樣式屬性

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 使用巢狀結構語法 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

關鍵字與文字數值 長度與角度單位 位置名稱與時間單位

規則與定義

變數 ( Variables ) 媒體查詢 ( @media ) 容器查詢 ( @container ) 自訂屬性值 ( @property ) 匯入樣式 ( @import ) 分層優先順序 ( @layer )

函式類型

數學計算 文字與清單計數 形狀與線段 路徑 ( path ) 生成內容與引號

顏色與濾鏡

顏色單位 色彩模型 漸層色 影像濾鏡 ( filter ) 背景濾鏡 ( backdrop-filter ) 混合模式 ( mix-blend-mode )

文字與段落

設定字型 ( font-family ) 使用外部字型 定義字型 ( @font-face ) 文字尺寸 文字樣式 ( 常用 ) 文字樣式 ( 其他實用 ) 文字樣式 ( 特殊用途 ) 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 文字自動分欄

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬度與高度 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 ( border-radius ) 影像邊框 ( border-image ) 輪廓 ( outline ) 內容溢出與裁切 ( overflow ) 內容範圍 ( contain ) 可見性與透明度

背景與陰影

背景顏色 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 定義計數規則 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 定位 ( position )

Flexbox 彈性排版

Flexbox 彈性盒子 Flexbox 對齊方式 Flexbox 彈性伸縮

Grid 網格排版

Grid 網格容器與格線 Grid 網格空間與命名 Grid 網格流向與間距 Grid 排列網格項目 Grid 項目對齊與順序

轉場與動畫

轉場 ( transition ) 轉場觸發事件 動畫 ( animation ) 自訂動畫路徑 ( offset ) 動畫觸發事件 多重動畫的權重與順序

變形、裁切與遮罩

裁切路徑 ( clip-path ) 影像遮罩 ( mask ) 物件填滿方式與定位 轉換函式 ( transform ) 平移、旋轉與縮放 3D 轉換與透視 3D 正多面體

視窗與使用者行為

捲軸樣式 ( scrollbar ) 滑鼠游標圖示 ( cursor ) 滑鼠事件 ( pointer-events ) 使用者選取 ( user-select ) 捲動行為 ( scroll、overscroll )

範例效果

CSS 圓餅圖 CSS 跑馬燈 Google 載入動畫 漸層色的轉場與動畫 電子時鐘數字 不規則形狀動畫