形状与线段

进行 CSS 的动画或裁切效果时，有时会用到“形状”或“线段”相关 CSS 函数，这些函数有 circle()、rect()、ellipse()、ray()、inset()、polygon()、和 xywh() 等，透过这些函数的操作，可以让 CSS 更有特色更具变化，这篇教学会介绍这些有趣的 CSS 函数。

延伸阅读：CSS 路径 path ( 函数类型 )

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

“形状与线段”的 CSS 函数

下方列出“形状与路径”类型的 CSS 函数 ( 目前主流浏览器都支援 )，基本上都会搭配动画和裁切才会有实际效果。

参考：裁切路径 clip-path、自订动画路径 offset

circle() 圆形

circle() 是“圆形”CSS 函数，可以产生一个“封闭”的圆形路径，具有下列参数：

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>

ellipse() 椭圆形

ellipse() 是“椭圆形”CSS 函数，可以产生一个“封闭”的椭圆形路径，具有下列的参数：

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>

rect() 四边形

rect() 是“四边形”CSS 函数，可以产生一个“封闭”的四边形路径，具有下列几个参数 ( 撰写时需要按照下表，从上而下的顺序，主要都是针对元素的上缘和左侧 )：

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>

polygon() 多边形

polygon() 是“多边形”CSS 函数，可以产生一个“封闭”的多边形路径，至少必须具有“三个座标点”，座标可使用长度单位数值 ( 常用百分比单位 )，初学者建议透过“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>

inset() 内缩边距和圆角

inset() 是“元素内缩边距和圆角”CSS 函数，可以使用元素内缩方式产生一个“封闭”的四边形路径，具有下列参数：

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>

xywh() 虚拟矩形

xywh() 是“虚拟矩形”CSS 函数，可以产生一个“封闭”的四边形路径，和 rect() 最大的差异在于 rect() 是根据元素边缘定义四个边的位置，而 xywh() 是根据左上角的 xy 座标与长宽尺寸来产生四边形，具有下列几个参数：

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>

ray() 放射线

ray() 是“放射线”CSS 函数，可以产生一条指定角度的放射线路径，使用 ray() 要特别注意，因为“不是封闭形状”，所以并不适用 clip-path 样式属性，具有下列几个参数：

参数 size 可使用下方的关键字 ( 注意，是指元素和“父元素”之间的距离 )：

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>

下方的范例会将 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>

下方的范例执行后，会使用 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 效果，赶快用“形状与线段”相关的 CSS 函数试试看吧。

意见反馈